/* GERADO por css/ds/build.sh — NÃO editar. Edite css/ds/*.css e rode: sh css/ds/build.sh */

/* ===== fonts.css ===== */
/* ATENÇÃO: todo url() dos fontes do DS é relativo a css/ds.css (arquivo gerado pelo build.sh), NÃO ao arquivo-fonte. Ex.: ../fonts/..., ../images/ds/... */
/*
 * Design System - fontes self-hosted (same-origin; compativel com CSP default-src 'none').
 * Poppins: @fontsource/poppins@5.3.0 (SIL OFL 1.1, ver fonts/poppins/OFL.txt). Subsets latin + latin-ext.
 * VAG Rundschrift D: fonte legada do template (fonts/VAGRundschriftD/).
 * Caminhos relativos a css/ds/fonts.css. Doc: docs/ds/fontes-e-icones.md
 */

/* poppins-latin-ext-300-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-300-normal.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;
}

/* poppins-latin-300-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-300-normal.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;
}

/* poppins-latin-ext-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-400-normal.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;
}

/* poppins-latin-400-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-400-normal.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;
}

/* poppins-latin-ext-400-italic */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-400-italic.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;
}

/* poppins-latin-400-italic */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-400-italic.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;
}

/* poppins-latin-ext-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-500-normal.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;
}

/* poppins-latin-500-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-500-normal.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;
}

/* poppins-latin-ext-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-600-normal.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;
}

/* poppins-latin-600-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-600-normal.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;
}

/* poppins-latin-ext-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-700-normal.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;
}

/* poppins-latin-700-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-700-normal.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;
}

/* poppins-latin-ext-900-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-ext-900-normal.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;
}

/* poppins-latin-900-normal */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/poppins/poppins-latin-900-normal.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;
}

/* VAG Rundschrift D (woff2 -> woff -> ttf; .eot/.svg removidos) */
@font-face {
  font-family: 'VAG Rundschrift D';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/VAGRundschriftD/VAGRundschriftD.woff2') format('woff2'),
       url('../fonts/VAGRundschriftD/VAGRundschriftD.woff') format('woff'),
       url('../fonts/VAGRundschriftD/VAGRundschriftD.ttf') format('truetype');
}

/* ===== tokens.css ===== */
/* ==========================================================================
   Design System — TOKENS (WF-11078)
   Fonte: XD 0b6dda6e-… (docs/ds/spec-B-global-e-conteudo.md §1–§3)
   Regras:
   - Nenhum componente usa valor "solto" (hex/px de cor, raio, fonte): usa estes tokens.
   - Breakpoints NÃO podem ser variáveis CSS (limitação de @media). Valores oficiais:
       mobile  : max-width: 991.98px   (layout 428 do XD)
       desktop : min-width: 992px      (container 1160; mínimo de projeto 1366x768)
   ========================================================================== */

:root {
    /* ---- Cores de marca ------------------------------------------------ */
    --c-navy: #030b2e;            /* "Secundário" no XD */
    --c-pink: #ff245c;            /* "Bt_primário" no XD */
    --c-pink-soft: #ff5c85;
    --c-brand-a: #ef5942;
    --c-brand-b: #ec2474;

    /* ---- Neutros ------------------------------------------------------- */
    --c-white: #ffffff;
    --c-offwhite: #fbfbfb;
    --c-surface-1: #f1f1f1;       /* fundo card de produto, itens de submenu */
    --c-surface-2: #f2f2f2;       /* zebra da tabela */
    --c-surface-3: #fafafa;       /* painel de resposta do FAQ */
    --c-border-soft: #cfcfcf;     /* bordas suaves / desabilitado */
    --c-hover-neutral: #cccccc;
    --c-border-strong: #707070;   /* XD: borda .25px de caixas/inputs, polegar da rolagem, texto mobile do FAQ */
    --c-pink-hover: #e01f52;      /* primário hover (−8 % luminosidade) [NÃO VERIFICADO no XD, Spec B §6] */
    --c-navy-hover: #323b66;      /* navy hover — cor de sistema do XD (53×) */
    --c-text-strong: #262626;
    --c-text: #424344;            /* "Alternativa" no XD */
    --c-text-muted: #666666;
    --c-text-caption: #999999;

    /* ---- Semânticas (status) ------------------------------------------- */
    --c-success: #42ed9e;
    --c-success-bg: #c4e8d3;
    --c-danger: #ed4257;
    --c-danger-bg: #ffc9c9;
    --c-info: #207bb7;            /* [NÃO VERIFICADO] onde o XD usa */
    --c-warning: #edab42;
    --c-game-win: #0d815a;        /* fundo da tela "Ganhou" (Mapa C) */
    --c-game-green: #165d59;
    --c-game-green-dark: #134d4a;
    --c-success-border: #124d49;  /* borda do alerta de sucesso — XD Spec C §0 */

    /* ---- Gradientes ---------------------------------------------------- */
    --g-brand-diag: linear-gradient(135deg, var(--c-brand-a), var(--c-brand-b));
    --g-brand-vert: linear-gradient(180deg, var(--c-brand-a), var(--c-brand-b));

    /* ---- Tipografia ---------------------------------------------------- */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-game: 'VAG Rundschrift D', 'Poppins', Arial, sans-serif;
    --font-icon-solid: 'Font Awesome 6 Free';
    --font-icon-brands: 'Font Awesome 6 Brands';

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* tamanho / entrelinha (desktop) */
    --fs-display: 38px;   --lh-display: 48px;
    --fs-h1: 38px;        --lh-h1: 48px;
    --fs-h2: 28px;        --lh-h2: 38px;
    --fs-h3: 22px;        --lh-h3: 32px;
    --fs-lead: 18px;      --lh-lead: 28px;
    --fs-body: 16px;      --lh-body: 26px;
    --fs-small: 14px;     --lh-small: 21px;
    --fs-caption: 10px;   --lh-caption: 28px;
    --fs-button: 16px;    --lh-button: 26px;

    /* ---- Espaçamento (escala de 4) ------------------------------------ */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 40px;
    --sp-8: 48px;
    --sp-9: 64px;
    --sp-10: 120px;       /* respiro de seção da Home */
    --gutter-card: 29px;  /* espaço entre cards (XD) */

    /* ---- Layout -------------------------------------------------------- */
    --container: 1160px;
    --container-narrow: 960px;     /* lista do FAQ */
    --container-card: 1159px;      /* cartão branco de páginas de conteúdo */
    --page-pad-x: clamp(24px, 4vw, 103px);
    --page-pad-x-mobile: 40px;
    --header-h: 100px;

    /* ---- Forma --------------------------------------------------------- */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-file: 5px;    /* upload/alerta de sucesso */
    --radius: 10px;       /* botões, campos, FAQ, tabela */
    --radius-lg: 20px;    /* cards, caixas brancas, produto, prêmios */
    --radius-pill: 999px;
    --border-card: 3px solid var(--c-pink-soft);
    --border-arrow: 2px solid var(--c-white);
    --border-prize: 5px solid var(--c-white);

    /* ---- Movimento / camadas ------------------------------------------ */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --t-fast: .15s;
    --t: .25s;
    --z-header: 1030;     /* alinhado ao Bootstrap .fixed-top */
    --z-menu: 1040;
    --z-modal: 1050;
    --z-toast: 1080;
}

@media (max-width: 991.98px) {
    :root {
        --fs-display: 32px; --lh-display: 42px;
        --fs-h1: 28px;      --lh-h1: 38px;
        --fs-h2: 24px;      --lh-h2: 34px;
        --page-pad-x: var(--page-pad-x-mobile);
    }
}

/* ===== base.css ===== */
/* ==========================================================================
   Design System — BASE (WF-11078)
   Spec B §1.1 (container/grid), §2 (tipografia), §3 (cores) · Spec C §1.1 (fundo de página)
   Artboards: 02/03 (Home), 22 (Gabarito), 12–21 (páginas de conteúdo), 04–91 (fundo gradiente).
   Carregado DEPOIS do Bootstrap 4.4.1 do sistema e do FA6 → reseta/estende sem !important.
   ========================================================================== */

:root {
    --base-fs-h4: 24px;  --base-lh-h4: 34px;
    --base-fs-h5: 18px;  --base-lh-h5: 28px;
    --base-focus-ring: 3px solid var(--c-navy);
    --base-touch-target: calc(var(--sp-7) + var(--sp-1));
    --base-focus-offset: var(--sp-1);
    --base-focus-halo: 0 0 0 var(--sp-1) var(--c-white);
}

@media (max-width: 991.98px) {
    :root { --base-fs-h4: 20px; --base-lh-h4: 30px; }
}

/* ---- Reset moderno sobre o Bootstrap ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    color: var(--c-text);
    background-color: var(--c-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Fundo das páginas internas: gradiente diagonal de marca (Spec B §1.3 / Spec C §1.1) */
.page-bg-brand {
    background-color: var(--c-brand-b);
    background-image: var(--g-brand-diag);
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* ---- Títulos (Spec B §2). Cor navy; uppercase só via .t-h1 ------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-sans);
    color: var(--c-navy);
    font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--base-fs-h4); line-height: var(--base-lh-h4); }
h5 { font-size: var(--base-fs-h5); line-height: var(--base-lh-h5); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--sp-4); }

small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---- Links -------------------------------------------------------------- */
a {
    color: var(--c-pink);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--c-pink-hover); text-decoration: underline; }

/* Anel bicolor: navy sobre superfícies claras, halo branco sobre escuras.
   !important impede os resets legados e variantes de apagarem o indicador. */
:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before,
.custom-file-input:focus-visible ~ .custom-file-label,
#quiz .game-card .item:has(input:focus-visible) {
    outline: var(--base-focus-ring) !important;
    outline-offset: var(--base-focus-offset) !important;
    box-shadow: var(--base-focus-halo) !important;
}

img, svg { vertical-align: middle; }
img { max-width: 100%; height: auto; border-style: none; }
picture { display: contents; }   /* <picture> (AVIF/WebP) não cria caixa: o <img> mantém o layout */

hr {
    margin: var(--sp-5) 0;
    border: 0;
    border-top: 1px solid var(--c-border-soft);
}

::selection { background: var(--c-pink); color: var(--c-white); }

/* ---- Acessibilidade ----------------------------------------------------- */
.sr-only, .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-4);
    min-height: var(--base-touch-target);
    background: var(--c-navy); color: var(--c-white);
    border-radius: var(--radius); font-weight: var(--fw-semibold);
}
.skip-link:focus { top: var(--sp-4); color: var(--c-white); text-decoration: none; }
.page-card__title { overflow-wrap: anywhere; }

/* ---- Container (Spec B §1.1) -------------------------------------------
   Conteúdo = 1160 px; a largura do box soma o padding lateral para que o conteúdo
   continue 1160 em telas largas (em 1366 → laterais de 103 px). Mobile: 40 px
   (token --page-pad-x muda em ≤ 991.98). .container-fluid NÃO é alterado. */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--page-pad-x));
    padding-left: var(--page-pad-x);
    padding-right: var(--page-pad-x);
    margin-left: auto;
    margin-right: auto;
}
/* .container aninhado em modal/cartão não repete a lateral da página */
.modal .container,
.container .container { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ---- Helpers tipográficos (Spec B §2) ---------------------------------- */
.t-display  { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-black); color: var(--c-white); }
.t-h1       { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); text-transform: uppercase; }
.t-h2       { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.t-h3       { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.t-lead     { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-medium); }
.t-body     { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--c-text); }
.t-small    { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-caption  { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-light); color: var(--c-text-caption); }
.t-upper    { text-transform: uppercase; }
.t-link     { color: var(--c-pink); text-decoration: underline; }
.t-game     { font-family: var(--font-game); }

/* Ícones Font Awesome herdam a cor do contexto (o reset `* {color:#000}` do style-default.min.css os deixava pretos).
   :where() = especificidade 0: qualquer regra de classe continua vencendo. */
:where(.fa, .fas, .fab, .fa-solid, .fa-brands) { color: inherit; }

/* ===== components/buttons.css ===== */
/* ==========================================================================
   Design System — BOTÕES (WF-11078)
   Spec B §6 (botões, setas) · Spec C §2.9 · Artboards 02/03 (Home), 10 (Prevent Button: #f1f1f1→#ccc),
   25 (botão CNPJ), 36 (Cancelar #cfcfcf).
   Restila .btn do Bootstrap 4.4.1 via custom properties (--btn-*) por variante:
   o markup atual (btn btn-primary / btn-secondary / btn-success / btn-danger…) ganha o visual novo.
   Mapeamento: primary=rosa · dark/navy/success/info=navy · secondary/cancel=cinza claro ·
               light/white=branco · danger=vermelho (modal-footer: vira "Corrigir" neutro).
   ========================================================================== */

:root {
    --btn-w: 268px;
    --btn-h: 52px;
    --btn-arrow: 80px;      /* seta de carrossel desktop (Spec B §6) */
}

@media (max-width: 991.98px) {
    :root { --btn-arrow: 60px; }
}

.btn {
    /* variante padrão = primário (rosa) */
    --btn-bg: var(--c-pink);
    --btn-bg-h: var(--c-pink-hover);
    --btn-fg: var(--c-white);
    --btn-fg-h: var(--btn-fg);
    --btn-bd: var(--btn-bg);
    --btn-bd-h: var(--btn-bg-h);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    position: relative;
    min-width: var(--btn-w);
    max-width: 100%;
    min-height: var(--btn-h);
    padding: 0 var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    line-height: var(--lh-button);
    font-weight: var(--fw-semibold);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal;
    border: 2px solid var(--btn-bd);
    border-radius: var(--radius);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover,
.btn:focus {
    background-color: var(--btn-bg-h);
    border-color: var(--btn-bd-h);
    color: var(--btn-fg-h);
    text-decoration: none;
    box-shadow: none;
}
.btn:not(:disabled):not(.disabled):active,
.btn:not(:disabled):not(.disabled).active {
    background-color: var(--btn-bg-h);
    border-color: var(--btn-bd-h);
    color: var(--btn-fg-h);
    transform: translateY(1px);
    box-shadow: none;
}
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus { box-shadow: none; }
.btn:focus-visible { outline: var(--base-focus-ring); outline-offset: 2px; }
.on-dark .btn:focus-visible,
.bg-navy .btn:focus-visible,
.bg-brand .btn:focus-visible,
.page-bg-brand .btn:focus-visible { outline-color: var(--c-white); }

/* ---- Variantes ----------------------------------------------------------- */
.btn-primary { --btn-bg: var(--c-pink); --btn-bg-h: var(--c-pink-hover); --btn-fg: var(--c-white); }

.btn-dark, .btn--dark, .btn--navy, .btn-success, .btn-info {
    --btn-bg: var(--c-navy); --btn-bg-h: var(--c-navy-hover); --btn-fg: var(--c-white);
}

/* neutro / Cancelar (Prevent Button do XD: #f1f1f1 → hover #cccccc) */
.btn-secondary, .btn--cancel, .btn--neutral {
    --btn-bg: var(--c-surface-1); --btn-bg-h: var(--c-hover-neutral); --btn-fg: var(--c-text);
}
.btn--gray { --btn-bg: var(--c-border-soft); --btn-bg-h: var(--c-hover-neutral); --btn-fg: var(--c-text); }

.btn-light, .btn--white {
    --btn-bg: var(--c-white); --btn-bg-h: var(--c-surface-1); --btn-fg: var(--c-navy);
}

.btn-danger { --btn-bg: var(--c-danger); --btn-bg-h: var(--c-danger); --btn-fg: var(--c-white); }
.btn-danger:hover { filter: brightness(.92); }
.btn-warning { --btn-bg: var(--c-warning); --btn-bg-h: var(--c-warning); --btn-fg: var(--c-navy); }
.btn-warning:hover { filter: brightness(.94); }

/* Outline (não desenhado no XD — proposta Spec B §6) */
.btn-outline-primary { --btn-bg: transparent; --btn-bg-h: var(--c-pink); --btn-fg: var(--c-pink); --btn-fg-h: var(--c-white); --btn-bd: var(--c-pink); --btn-bd-h: var(--c-pink); }
.btn-outline-dark, .btn-outline-secondary, .btn-outline-success {
    --btn-bg: transparent; --btn-bg-h: var(--c-navy); --btn-fg: var(--c-navy); --btn-fg-h: var(--c-white); --btn-bd: var(--c-navy); --btn-bd-h: var(--c-navy);
}
.btn-outline-light { --btn-bg: transparent; --btn-bg-h: var(--c-white); --btn-fg: var(--c-white); --btn-fg-h: var(--c-navy); --btn-bd: var(--c-white); --btn-bd-h: var(--c-white); }

/* Botão-faixa do modal CNPJ (Artboard 25): 527×40, raio 5, Medium 14/24 */
.btn--strip {
    min-width: 0; width: 527px; min-height: 40px; padding: 0 var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small); line-height: 24px; font-weight: var(--fw-medium);
}

/* ---- Tamanhos ------------------------------------------------------------ */
.btn-sm, .btn--sm {
    min-width: 0; min-height: var(--base-touch-target); padding: 0 var(--sp-4);
    font-size: var(--fs-small); line-height: var(--lh-small);
    border-radius: var(--radius);
}
.btn-lg { min-width: var(--btn-w); }
.btn-block, .btn--block { display: flex; width: 100%; }

/* ---- Desabilitado (proposta): #cfcfcf / #666 ---------------------------------- */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
    --btn-bg: var(--c-border-soft); --btn-bg-h: var(--c-border-soft); --btn-fg: var(--c-text-muted);
    --btn-bd: var(--c-border-soft); --btn-bd-h: var(--c-border-soft);
    background-color: var(--c-border-soft);
    border-color: var(--c-border-soft);
    color: var(--c-text-muted);
    opacity: 1; cursor: not-allowed; pointer-events: none; filter: none; transform: none;
}

/* ---- Carregando (feedback do cupom): spinner em CSS, sem imagem -------------- */
.btn.is-loading,
.btn.is-loading:hover,
.btn.is-loading:focus { color: transparent; pointer-events: none; }
.btn.is-loading::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 3px solid var(--btn-fg);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn, .btn:active { transition: none; transform: none; }
    .btn.is-loading::after { animation-duration: 1.8s; }   /* mantém o feedback, mais lento */
}

/* ---- Botão-link ------------------------------------------------------------ */
.btn-link, .btn--link {
    --btn-bg: transparent; --btn-bg-h: transparent; --btn-fg: var(--c-pink); --btn-fg-h: var(--c-pink-hover);
    --btn-bd: transparent; --btn-bd-h: transparent;
    min-width: 0; min-height: 0; padding: 0; font-weight: var(--fw-medium); text-decoration: underline;
}
.btn-link:hover, .btn--link:hover { text-decoration: underline; }

/* ---- Ícone / seta de carrossel (Spec B §6): círculo, borda 2px ---------------- */
.btn--icon, .btn--arrow {
    --btn-bg: var(--c-navy); --btn-bg-h: var(--c-navy-hover); --btn-fg: var(--c-white);
    min-width: 0; padding: 0; border-radius: 50%; line-height: 1;
}
.btn--icon { width: 40px; height: 40px; min-height: 40px; }
.btn--arrow {
    width: var(--btn-arrow); height: var(--btn-arrow); min-height: 0;
    border: var(--border-arrow);
    border-color: var(--btn-bd);
    font-size: 38px;
}
@media (max-width: 991.98px) { .btn--arrow { font-size: 28px; } }
.btn--arrow--sm { width: var(--base-touch-target); height: var(--base-touch-target); font-size: var(--fs-lead); border-color: var(--c-white); }   /* "Como participar" mobile: área de toque acessível */
.btn--arrow--next { --btn-bg: var(--c-pink); --btn-bg-h: var(--c-pink-hover); }
.btn--arrow--prev { --btn-bg: var(--c-pink-soft); --btn-bg-h: var(--c-pink); }
.btn--arrow.is-disabled, .btn--arrow:disabled {
    --btn-bg: var(--c-border-soft); --btn-bd: var(--c-border-soft); --btn-fg: var(--c-navy);
}

/* ---- Mobile: botões continuam 268 centrados (XD), mas nunca estouram a coluna --- */
@media (max-width: 991.98px) {
    .btn--block-mobile { display: flex; width: 100%; min-width: 0; }
    .btn--strip { width: 100%; height: auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); font-weight: var(--fw-semibold); border-radius: var(--radius); }
}
/* Dentro de input-group o botão acompanha a altura do campo */
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn { min-width: 0; min-height: 53px; border-radius: 0 var(--radius) var(--radius) 0; }

/* A11y: setas de carrossel com alvo >= 44px no mobile (visual do XD: 40px; ampliado por pseudo-elemento). */
@media (max-width: 991.98px) {
    .btn--arrow { position: relative; }
    .btn--arrow::after { content: ""; position: absolute; inset: -2px; }
}

/* ===== components/forms.css ===== */
/* ==========================================================================
   Design System — FORMULÁRIOS (WF-11078)
   Spec C §2 (controles), §1.4 (caixa de regra da senha), §2.10 (seções), §9.3 (estados propostos)
   Artboards 06/07 (Cadastro), 40/47, 04/05 (Login/senha), 10/25 (Atendimento/Cupom), 44/45.
   CONTRATO DE MARKUP ATUAL (mantido): .form-group > input|select|textarea.form-control + label.labelfocus
   (label DEPOIS do campo, "notched" sobre a borda). Fundo do entalhe = var(--field-bg, #fff):
   em painéis cinza definir --field-bg:#fafafa no wrapper.
   Estados de focus/erro/disabled NÃO existem no XD → propostos [NÃO VERIFICADO].
   ========================================================================== */

:root {
    --form-h: 53px;
    --form-gap: 46px;            /* 53 + 46 = pitch 99 do XD (desktop) */
    --form-pad-x: 18px;
    --form-fs-label: 12px;
    --form-fs-hint: 10px;
    --form-chevron: linear-gradient(45deg, transparent 50%, var(--c-navy) 50%),
                    linear-gradient(135deg, var(--c-navy) 50%, transparent 50%);
}
@media (max-width: 991.98px) { :root { --form-gap: 36px; } }   /* pitch 89 mobile */

/* ---- Grupo + label entalhada ---------------------------------------------- */
.form-group { position: relative; margin-bottom: var(--form-gap); }

label:not([class]), .form-label {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--fs-small); line-height: var(--lh-small);
    font-weight: var(--fw-semibold); color: var(--c-navy);
}

.labelfocus {
    position: absolute; z-index: 2; left: 12px; top: -15px;
    margin: 0; padding: 0 6px;
    font-size: var(--form-fs-label); line-height: 30px; font-weight: var(--fw-regular);
    color: var(--c-navy); background: var(--field-bg, var(--c-white));
    white-space: nowrap; pointer-events: none;
}

/* ---- Campo base ------------------------------------------------------------ */
.form-control {
    display: block; width: 100%; height: var(--form-h);
    padding: 0 var(--form-pad-x);
    font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
    font-weight: var(--fw-regular); color: var(--c-text-strong);
    background-color: var(--c-white);
    border: 1px solid var(--c-text-strong); border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--t-fast) var(--ease);
}
.form-control::placeholder { color: var(--c-border-soft); opacity: 1; }
.form-control:focus {
    color: var(--c-text-strong); background-color: var(--c-white);
    border-color: var(--c-navy); box-shadow: none;
    outline: 2px solid var(--c-pink-soft); outline-offset: 2px;
}
textarea.form-control { height: 130px; padding-top: 14px; padding-bottom: 14px; resize: vertical; }

select.form-control {
    -webkit-appearance: none; appearance: none;
    padding-right: 48px; text-overflow: ellipsis;
    background-image: var(--form-chevron);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%;
}
select.form-control::-ms-expand { display: none; }

.form-control:disabled, .form-control[readonly] {
    background-color: var(--c-surface-1); color: var(--c-text-muted); opacity: 1;
}
.form-control:disabled { cursor: not-allowed; text-align: left; }   /* custom.css legado centralizava campos desabilitados */
.form-control[readonly]:focus { outline: 2px solid var(--c-pink-soft); }
.form-control-sm { height: 40px; font-size: var(--fs-small); }

/* ---- Senha com olho (Spec C §2.2) ------------------------------------------- */
.form-group--eye .form-control { padding-right: 56px; }
.input-eye {
    position: absolute; z-index: 3; top: var(--sp-1); right: var(--sp-2);
    width: var(--base-touch-target); height: var(--base-touch-target); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; color: var(--c-navy);
    background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.input-eye:hover { color: var(--c-pink); }

/* ---- Ajuda / erro ------------------------------------------------------------ */
.form-text, .form-hint {
    display: block; margin-top: 15px;
    font-size: var(--form-fs-hint); line-height: 16px; font-weight: var(--fw-medium); color: var(--c-text-strong);
}
.invalid-feedback, .error-message, .cpf-feedback:not(:empty) {
    display: none; margin-top: 6px;
    font-size: var(--form-fs-label); line-height: 18px; font-weight: var(--fw-regular); color: var(--c-pink);
}
.error-message { display: block; }
.is-invalid ~ .invalid-feedback, .invalid-feedback.d-block, .was-validated :invalid ~ .invalid-feedback,
.form-group.is-invalid .invalid-feedback, .cpf-feedback:not(:empty) { display: block; }

/* Estados (sobrepõem os ícones data: URI do Bootstrap — CSP do live) */
.form-control.is-invalid, .was-validated .form-control:invalid,
.input.error .form-control {
    border-color: var(--c-pink); padding-right: var(--form-pad-x);
    background-image: none; box-shadow: none;
}
input.form-control.is-valid, .was-validated input.form-control:valid,
textarea.form-control.is-valid, .was-validated textarea.form-control:valid {
    border-color: var(--c-success); padding-right: var(--form-pad-x); background-image: none; box-shadow: none;
}
select.form-control.is-invalid, select.form-control.is-valid,
.was-validated select.form-control:invalid, .was-validated select.form-control:valid {
    background-image: var(--form-chevron); background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
    background-position: calc(100% - 26px) 50%, calc(100% - 20px) 50%; padding-right: 48px; box-shadow: none;
}
select.form-control.is-invalid, .was-validated select.form-control:invalid { border-color: var(--c-pink); }
select.form-control.is-valid, .was-validated select.form-control:valid { border-color: var(--c-success); }
.form-group.is-invalid .labelfocus, .form-group:has(.is-invalid) .labelfocus { color: var(--c-pink); }

/* ---- Checkbox / radio (consentimento) — Spec C §2.5 ---------------------------- */
.custom-control { position: relative; display: block; min-height: 26px; padding-left: 30px; margin-bottom: var(--sp-3); }
.custom-control-label {
    position: relative; margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);
    font-weight: var(--fw-regular); color: var(--c-text-muted); cursor: pointer;
}
.custom-control-label a { color: var(--c-navy); text-decoration: underline; }
.custom-control-label::before {
    content: ""; position: absolute; display: block; top: 3px; left: -30px; width: 20px; height: 20px;
    background-color: var(--c-white); border: 1px solid var(--c-navy); border-radius: 2px; box-shadow: none;
}
.custom-control-label::after {
    content: ""; position: absolute; display: block; top: 3px; left: -30px; width: 20px; height: 20px;
    background: none; opacity: 0;
}
.custom-checkbox .custom-control-label::after {
    font-family: var(--font-icon-solid); font-weight: 900; font-size: 14px; line-height: 20px;
    text-align: center; color: var(--c-navy);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { content: "\f00c"; opacity: 1; background-image: none; }
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-radio .custom-control-label::after { top: 8px; left: -25px; width: 10px; height: 10px; border-radius: 50%; background-color: var(--c-navy); }
.custom-radio .custom-control-input:checked ~ .custom-control-label::after { opacity: 1; background-image: none; background-color: var(--c-navy); }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: var(--c-navy); background-color: var(--c-white); border-color: var(--c-navy);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: none; border-color: var(--c-navy); }
.custom-control-input:focus-visible ~ .custom-control-label::before { outline: var(--base-focus-ring); outline-offset: 2px; }
.custom-control-input:disabled ~ .custom-control-label { color: var(--c-text-caption); cursor: not-allowed; }
.custom-control-input:disabled ~ .custom-control-label::before { background-color: var(--c-surface-1); border-color: var(--c-border-soft); }
.custom-control-input.is-invalid ~ .custom-control-label::before { border-color: var(--c-pink); }
input.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--c-navy); }

/* ---- Upload de arquivo (.custom-file) — Spec C §2.7 --------------------------- */
.custom-file { position: relative; display: block; width: 100%; height: 54px; margin: 0; }
.custom-file-input { position: relative; z-index: 2; width: 100%; height: 54px; margin: 0; opacity: 0; cursor: pointer; }
.custom-file-label {
    position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 54px; margin: 0;
    padding: 0 110px 0 var(--form-pad-x); overflow: hidden;
    font-size: var(--fs-body); line-height: 52px; font-weight: var(--fw-regular); color: var(--c-text-muted);
    text-overflow: ellipsis; white-space: nowrap; background: var(--field-bg, var(--c-white));
    border: 1px solid var(--c-navy); border-radius: var(--radius-file);
}
.custom-file-label::after {
    content: "Selecionar"; position: absolute; top: 6px; right: 7px; bottom: auto; z-index: 3;
    display: flex; align-items: center; justify-content: center; width: 90px; height: 40px; padding: 0;
    font-size: var(--form-fs-label); line-height: 18px; color: var(--c-white);
    background: var(--c-navy); border: 0; border-radius: var(--radius-xs);
}
.custom-file-label[data-browse]::after { content: attr(data-browse); }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--c-navy); box-shadow: none; }
.custom-file-input:focus-visible ~ .custom-file-label { outline: 2px solid var(--c-pink-soft); outline-offset: 2px; }
.custom-file-input:disabled ~ .custom-file-label { background: var(--c-surface-1); }
@media (max-width: 991.98px) { .custom-file-label::after { height: 35px; top: 9px; } }

/* ---- Input group --------------------------------------------------------------- */
.input-group-text {
    height: var(--form-h); padding: 0 var(--form-pad-x);
    font-size: var(--fs-body); color: var(--c-text); background: var(--c-surface-1);
    border: 1px solid var(--c-text-strong); border-radius: var(--radius);
}
.input-group > .form-control { height: var(--form-h); }

/* ---- Grade de campos: 2 colunas desktop → 1 coluna mobile ------------------------ */
.form-row { margin-left: calc(var(--gutter-card) / -2); margin-right: calc(var(--gutter-card) / -2); }
.form-row > .col, .form-row > [class*="col-"] { padding-left: calc(var(--gutter-card) / 2); padding-right: calc(var(--gutter-card) / 2); }
@media (max-width: 991.98px) {
    .form-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ---- Seções do formulário longo (Spec C §2.10) ----------------------------------- */
.form-section { margin-bottom: var(--sp-6); }
.form-section + .form-section { padding-top: 59px; border-top: 1px solid var(--c-text); }
.form-section__title {
    margin: 0 0 var(--sp-8); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-navy);
}
.form-section__title::after { content: ""; display: block; width: 80px; height: 3px; margin-top: 2px; background: var(--c-navy); }
@media (max-width: 991.98px) {
    .form-section__title { font-size: var(--base-fs-h4); line-height: var(--base-lh-h4); margin-bottom: var(--sp-6); }
}

/* Caixa de regra da senha (Spec C §1.4): 307×55, #f1f1f1, borda .25px #707070, raio 3 */
.pass-rule {
    padding: 11px 14px; font-size: var(--form-fs-label); line-height: 16px; text-align: center;
    color: var(--c-text-caption); background: var(--c-surface-1);
    border: 1px solid var(--c-border-soft); border-radius: var(--radius-xs);
}

/* Linha de botões (Spec C §2.9): Cancelar | Ação, gap 29; mobile: Ação acima, gap 20 */
.form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter-card); }
@media (max-width: 991.98px) { .form-actions { flex-direction: column-reverse; align-items: center; gap: 20px; } }

/* ---- Plugins (neutros, não quebrados): select2 e datepicker ------------------------ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--form-h); border: 1px solid var(--c-text-strong); border-radius: var(--radius);
}
.select2-container--default .select2-selection--single { display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: var(--form-pad-x); line-height: var(--lh-body); color: var(--c-text-strong); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: var(--form-h); right: 10px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-pink); color: var(--c-white); }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--c-navy); }
.datepicker, .ui-datepicker, .daterangepicker { font-family: var(--font-sans); }
/* Dias de meses adjacentes continuam selecionáveis: não são controles inativos. */
.datepicker table tr td.old,
.datepicker table tr td.new { color: var(--c-text-muted) !important; } /* empata com o CSS do plugin bootstrap-datepicker (td.new); !important garante independente da ordem de carga */
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .ui-datepicker .ui-state-active { background: var(--c-pink); background-image: none; color: var(--c-white); text-shadow: none; }

/* Real participant pages: preserve JS hooks while composing DS primitives. */
:root {
    --auth-panel-h: 529px;
    --auth-panel-pad-x: 65px;
    --form-check-size: 20px;
    --form-check-radius: 2px;
    --password-form-gap: 36px;
    --auth-action-gap: 19px;
}
.auth-page .auth-card__form { order: 0; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--auth-panel-pad-x); }
.auth-page .auth-card__aside { order: 1; display: flex; flex-direction: column; justify-content: center; }
/* Override system Bootstrap-template hook without dropping .cadastrar. */
#form-login .auth-card__aside { align-self: stretch; border: 0; }
.auth-page .auth-card { min-height: var(--auth-panel-h); }
.auth-page .auth-card__content { width: 100%; }
.auth-page .auth-divider { width: 100%; }
.auth-page .page-card--auth { padding: 0; }
.auth-page .auth-card__form > .form-group { width: 100%; }
.auth-page .auth-card__link { color: var(--c-text-muted); }
.auth-page .input { position: relative; }
.page-card .input-eye:focus-visible { outline: var(--base-focus-ring); outline-offset: var(--sp-1); }
.registration-page .box { width: 100%; }
.registration-page .form-row > [class*="col"] { min-width: 0; }
.registration-page .form-section__title--divided { padding-top: var(--sp-8); border-top: 1px solid var(--c-text); }
.registration-page .form-group:has(input[type="checkbox"]) { color: var(--c-text-muted); }
.registration-page input[type="checkbox"] {
    appearance: none; width: var(--form-check-size); height: var(--form-check-size);
    flex: none; vertical-align: middle; margin-right: var(--sp-2);
    border: 1px solid var(--c-navy); border-radius: var(--form-check-radius);
    background: var(--c-white); color: var(--c-navy);
}
.registration-page input[type="checkbox"]:checked::before {
    content: "\f00c"; display: block; text-align: center;
    font-family: var(--font-icon-solid); font-weight: var(--fw-black);
    font-size: var(--fs-small); line-height: var(--form-check-size);
}
.registration-page .consent-label { display: inline; margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--c-text-muted); cursor: pointer; }
.registration-page .wrap-agree_terms a { color: var(--c-navy); text-decoration: underline; }
.registration-page .form-hint { margin-bottom: var(--sp-5); }
.password-page .pass-rule-box { display: block; color: var(--c-text); }
.password-page .password-card__body { text-align: center; }
.password-page--form .page-card { padding-bottom: var(--panel-card-pad-x); }
.password-page--form .page-card__title { margin-bottom: var(--sp-4); }
.password-page--form .form-group { margin-bottom: var(--form-check-size); }
.password-page--form .wrap-password .form-group { margin-bottom: var(--password-form-gap); }
.password-page--form .page-card__actions { margin-top: 0; }
.password-page--form .pass-rule-box { margin-bottom: var(--sp-6); }
.registration-success.page-shell { min-height: 0; }
.registration-success .page-card { padding-bottom: var(--sp-6); }
.registration-success .page-card__title { margin-bottom: var(--sp-5); }
.registration-success .confirmation__title { max-width: var(--btn-w); margin-inline: auto; }
.registration-success .page-card__actions { margin-top: var(--auth-action-gap); }
@media (min-width: 992px) {
    .auth-page .auth-card__aside { padding-inline: var(--sp-7); }
}
@media (max-width: 991.98px) {
    :root { --auth-panel-pad-x: 20px; --auth-form-h: 455px; --auth-aside-h: 470px; }
    .registration-page .form-section__title { font-size: var(--fs-lead); line-height: var(--lh-lead); }
    .registration-page .btn-sm { height: auto; min-height: var(--btn-h); white-space: normal; }
    .registration-page .form-row > [class*="col"] { flex: 0 0 100%; max-width: 100%; }
    .auth-page .auth-card__form, .auth-page .auth-card__aside { flex-basis: auto; }
    .auth-page .auth-card__link { margin-top: 0; }
    .auth-page .auth-card__form { min-height: var(--auth-form-h); }
    .auth-page .auth-card__aside { min-height: var(--auth-aside-h); }
}

/* ===== components/alerts.css ===== */
/* ==========================================================================
   Design System — ALERTAS / FLASH / TOAST (WF-11078)
   Spec C §3 (Alerta de Sucesso 60/61/73/77/84/88; aviso "Atenção!" 33/39) · §10.4 (flash/toast propostos).
   Cobre: .alert(-success|-danger|-warning|-info), Flash do CakePHP (Element/Flash/*: div.alert.* e
   div.message[.success|.error]), toast do helpers.js (showToast → .toast .toast-body.bg-{type}).
   ========================================================================== */

:root {
    --alert-success-border: var(--c-success-border);                 /* Spec C §0 (não existe token) */
    --alert-danger-border: rgba(254, 36, 92, .25);   /* #fe245c a 25 % */
}

.alert, .message {
    position: relative;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-small); line-height: 24px; font-weight: var(--fw-medium);
    color: var(--c-text);
    background: var(--c-surface-1);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-sm);
    box-shadow: none;
    overflow-wrap: anywhere;
}
.alert > :last-child, .message > :last-child { margin-bottom: 0; }

/* Sucesso = "Alerta de Sucesso" do XD */
.alert-success, .message.success {
    min-height: 115px; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 28px; color: var(--c-game-green-dark); background: var(--c-success-bg); border-color: var(--alert-success-border);
    border-radius: var(--radius-file); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold);
}
/* Erro = aviso rosa "Atenção!" (raio 3) */
.alert-danger, .message.error {
    min-height: 80px; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 18px 36px; color: var(--c-pink); background: var(--c-danger-bg); border-color: var(--alert-danger-border);
    border-radius: var(--radius-xs);
}
@media (max-width: 991.98px) {
    .alert-danger, .message.error { min-height: 100px; padding-inline: 18px; }
}
/* Aviso / info: neutros. Texto #424344 (não #999 do Spec C §10.4) para manter contraste legível */
.alert-warning { color: var(--c-text); background: var(--c-surface-1); border-color: var(--c-warning); }
.alert-info, .alert-information-user { color: var(--c-text); background: var(--c-surface-1); border-color: var(--c-border-soft); }

.alert-link { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }
.alert-link:hover { color: inherit; }
.alert--center { text-align: center; }
.alert-dismissible { padding-right: 56px; }
.alert .close { position: absolute; top: 0; right: 0; padding: var(--sp-3) var(--sp-4); color: inherit; opacity: 1; text-shadow: none; }

/* Flash padrão do Cake: clicar esconde (onclick do element) */
.message { cursor: pointer; }
.message.hidden { display: none; }

/* Caixa de erro inline (validação de formulário) — mesmo visual do aviso rosa */
.form-error-box, #msg-erro {
    padding: 18px 36px; text-align: center;
    font-size: var(--fs-small); line-height: 24px; font-weight: var(--fw-medium);
}
.form-error-box { color: var(--c-pink); background: var(--c-danger-bg); border: 1px solid var(--alert-danger-border); border-radius: var(--radius-xs); }

/* ---- Toast (Bootstrap .toast montado por showToast) -------------------------------- */
.toast {
    max-width: 360px; font-size: var(--fs-small);
    border: 1px solid var(--c-border-soft); border-radius: var(--radius);
    background: var(--c-white); overflow: hidden;
}
.toast.show { z-index: var(--z-toast); }
.toast.shadow-lg { box-shadow: none !important; }   /* design flat: Bootstrap .shadow-lg usa !important */
.toast-body { font-weight: var(--fw-medium); line-height: 22px; }
.toast-body .close { color: inherit; opacity: 1; text-shadow: none; }
/* cores por tipo; !important apenas para vencer .text-white (utilitário !important do Bootstrap) */
.toast-body.bg-success { background: var(--c-success-bg); color: var(--c-game-green-dark) !important; }
.toast-body.bg-danger  { background: var(--c-danger-bg); color: var(--c-pink) !important; }
.toast-body.bg-warning { background: var(--c-surface-1); color: var(--c-text) !important; }
.toast-body.bg-info    { background: var(--c-surface-1); color: var(--c-text) !important; }
.toast-header.bg-success { background: var(--c-game-green-dark); }
.toast-header.bg-danger  { background: var(--c-danger); }
.toast-header.bg-warning { background: var(--c-warning); }
.toast-header.bg-info    { background: var(--c-navy); }

/* ===== components/badges.css ===== */
/* ==========================================================================
   Design System — BADGES E STATUS (WF-11078)
   Spec C §5.4 (status: ponto r=5 + halo r=8 .5 + texto Medium 16/18) · §10.8 · Artboards 08/09, 36/43.
   - .badge (+ -primary|-info|-warning|-success|-danger|-secondary|-pill): rótulos pequenos do Bootstrap.
   - .status (+ --new|--progress|--closed): ponto+texto do XD. Classes legadas de TicketsTable
     (.badge.status-*) são mapeadas para o mesmo visual.
   ========================================================================== */

.badge {
    display: inline-block; padding: 3px var(--sp-2);
    font-size: var(--form-fs-label, 12px); line-height: 18px; font-weight: var(--fw-semibold);
    text-align: center; white-space: nowrap; vertical-align: baseline;
    color: var(--c-white); background: var(--c-navy);
    border-radius: var(--radius-xs);
}
.badge-primary { background: var(--c-pink); color: var(--c-white); }
.badge-info, .badge-dark { background: var(--c-navy); color: var(--c-white); }
.badge-secondary { background: var(--c-border-soft); color: var(--c-text); }
.badge-light { background: var(--c-surface-1); color: var(--c-text); }
.badge-warning { background: var(--c-warning); color: var(--c-navy); }
.badge-success { background: var(--c-success); color: var(--c-navy); }
.badge-danger { background: var(--c-danger); color: var(--c-white); }
.badge-pill { padding-left: var(--sp-3); padding-right: var(--sp-3); border-radius: var(--radius-pill); }
a.badge:hover { text-decoration: none; filter: brightness(.94); }
a.badge:focus-visible { outline: var(--base-focus-ring); outline-offset: 2px; }

/* ---- Status: ponto + halo + texto (sem pílula com fundo, como no XD) ----------------- */
.status,
.badge.status-novo, .badge.status-andamento,
.badge.status-aguardando, .badge.status-fechado, .badge.status-default {
    --status-color: var(--c-success);
    position: relative; display: inline-block; padding: 0 0 0 26px;
    font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-medium); text-align: left;
    color: var(--status-color); background: transparent; border-radius: 0; white-space: nowrap;
}
.status::before, .status::after,
.badge[class*="status-"]::before, .badge[class*="status-"]::after {
    content: ""; position: absolute; top: 50%; border-radius: 50%; background: var(--status-color);
}
.status::before, .badge[class*="status-"]::before { left: 0; width: 16px; height: 16px; margin-top: -8px; opacity: .5; }   /* halo r=8 */
.status::after, .badge[class*="status-"]::after { left: 3px; width: 10px; height: 10px; margin-top: -5px; }                 /* ponto r=5 */

.status--new, .badge.status-novo { --status-color: var(--c-success); }
.status--progress, .badge.status-andamento, .badge.status-aguardando { --status-color: var(--c-warning); }
.status--closed, .badge.status-fechado { --status-color: var(--c-danger); }
.badge.status-default { --status-color: var(--c-text-caption); }

/* ===== components/modal.css ===== */
/* ==========================================================================
   Design System — MODAL (WF-11078)
   Spec C §4 (modal "estão corretas?" 33/39: card 623 r20, H1 2 linhas, lista, aviso, botões Corrigir/Confirmar)
   · §10.5 (overlay rgba(3,11,46,.7), fechar xmark 20px #030b2e) · Modal Cupom Fiscal.
   Mantém o contrato JS do Bootstrap: data-toggle="modal", .modal.fade, .modal-dialog, .show, data-dismiss.
   Overlay e botão de fechar NÃO existem no XD → propostos [NÃO VERIFICADO].
   ========================================================================== */

.modal-backdrop { background-color: var(--c-navy); }
.modal-backdrop.show { opacity: .7; }

.modal { z-index: var(--z-modal); font-family: var(--font-sans); }
.modal-dialog { max-width: 623px; margin: var(--sp-5) auto; }
.modal-lg, .modal-xl { max-width: var(--container-narrow); }
.modal-content {
    position: relative; color: var(--c-text);
    background: var(--c-white); border: 0; border-radius: var(--radius-lg); box-shadow: none;
}

.modal-header {
    display: block; padding: var(--sp-5) var(--sp-6) 0; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal-title {
    margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold);
    color: var(--c-navy); text-align: center; text-transform: uppercase;
}
.modal-header.alert-danger { padding-bottom: var(--sp-4); background: var(--c-danger-bg); }

/* Fechar: xmark FA6 (o × do markup é escondido) */
.modal .close {
    position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
    width: var(--base-touch-target); height: var(--base-touch-target); padding: 0; margin: 0; float: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; color: var(--c-navy); opacity: 1; text-shadow: none;
    background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.modal .close::before { content: "\f00d"; font-family: var(--font-icon-solid); font-weight: 900; font-size: 20px; line-height: 1; }
.modal .close:hover { color: var(--c-pink); opacity: 1; }
.modal .close:focus-visible { outline: var(--base-focus-ring); outline-offset: 2px; }

.modal-body { padding: var(--sp-5) var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); }
.modal-body h4, .modal-body h5 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--c-text); }
.modal-body ul { padding-left: var(--sp-5); font-style: italic; }

.modal-footer {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gutter-card);
    padding: 0 var(--gutter-card) var(--sp-6); border: 0;
}
.modal-footer > * { margin: 0; }
/* "Corrigir" do markup atual é .btn-danger → neutro (#f1f1f1) como no XD; "Confirmar" (.btn-success) fica navy */
.modal-footer .btn-danger { --btn-bg: var(--c-surface-1); --btn-bg-h: var(--c-hover-neutral); --btn-fg: var(--c-text); filter: none; }

@media (max-width: 991.98px) {
    .modal-dialog { margin: var(--sp-4) var(--sp-7); }
    .modal-header { padding: var(--sp-5) var(--sp-5) 0; }
    .modal-body { padding: var(--sp-4) var(--sp-5); }
    .modal-footer { flex-direction: column-reverse; align-items: center; gap: 20px; padding: 0 var(--sp-5) var(--sp-5); }
}
@media (max-width: 575.98px) { .modal-dialog { margin: var(--sp-4) var(--page-pad-x-mobile); } }

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog, .fade { transition: none; }
}

/* ===== components/header.css ===== */
/* ==========================================================================
   Design System — HEADER / MENU PRINCIPAL  (.site-header)
   Spec: docs/ds/spec-B-global-e-conteudo.md §4.1–§4.3 e §2 (tipografia do menu)
   Artboards XD: desktop público [02,04,06,12,14,16,18,20,22,24…],
                 desktop logado "Main Menu – Interno" [08,10,25,30,33,35,36…],
                 mobile "Main Menu – Mobile" [03,05,07,13,15,17,19,21…] e
                 mobile logado "Main Menu – Mobile Interno" [09,11,29,32,39…].
   Hooks LEGADOS preservados (js/Layout/default.js → myFunction(this)):
     .abrirMenu (+ .bar1/.bar2/.bar3, recebe .change) · ul.menu (recebe .active)
     · `header .menu li a` (clique fecha o menu) · li.participar (CTA) · li.logado.
   O mesmo mecanismo de toggle é usado: nenhuma classe nova é exigida do JS.
   Breakpoint: mobile <= 991.98px (desktop primeiro, mobile sobrescreve).
   ATENÇÃO (fase "global"): as regras antigas `header .menu …` de css/custom.css
   (l.783-1290) e css/global.css (l.7-160) têm especificidade maior que as deste
   arquivo e DEVEM ser removidas quando o DS for ligado ao layout.
   ========================================================================== */

.site-header {
    position: relative;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--c-navy);
    font-family: var(--font-sans);
}

/* Header fixo no site real (o styleguide usa o header "relative" nas demos).
   O espaço é reservado por body{padding-top:var(--header-h)} em custom.css. */
.site-header--fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--page-pad-x));
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--page-pad-x);
}

/* ---- Logo (Gabarito [22]: SVG/PNG, altura máxima 60px) ------------------ */
.site-header__brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
    margin: 0;
    line-height: 0;
}
.site-header__brand img {
    display: block;
    width: auto;
    height: 60px;
    max-width: none;
    max-height: 60px;
}
.site-header__brand:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 4px;
}

/* ---- Navegação (desktop) -------------------------------------------------
   Links ficam alinhados à direita, caixas adjacentes (sem gap) e o bloco da
   direita (CTA branco ou "Olá, Nome" rosa) encostado na borda do container. */
.site-header__nav {
    align-self: stretch;
    display: flex;
    margin-left: auto;
}

.site-header .menu {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-header .menu > li {
    display: flex;
    align-self: stretch;
    margin: 0;
    padding: 0;
}
.site-header .menu > li > a {
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: var(--c-white);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: 25px;
    text-decoration: none;
    white-space: nowrap;
    height: 100%;
    min-height: var(--header-h);
    transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* hover/ativo dos links: [NÃO VERIFICADO] — o XD não exportou o estado hover */
.site-header .menu > li > a:hover,
.site-header .menu > li > a[aria-current="page"],
.site-header .menu > li > a.is-active {
    color: var(--c-pink);
    text-decoration: none;
}
.site-header .menu > li > a[aria-current="page"],
.site-header .menu > li > a.is-active {
    box-shadow: inset 0 -4px 0 var(--c-pink);
}
.site-header .menu > li > a:focus-visible,
.site-header .site-header__user-toggle:focus-visible,
.site-header .site-header__submenu a:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: -3px;
}

/* ---- CTA "CADASTRE-SE" (li.participar): bloco branco 155x100 ------------- */
.site-header .menu > li.participar {
    height: var(--header-h);
    max-height: none;
    margin: 0;
    border-radius: 0;
    background: transparent;
}
.site-header .menu > li.participar:not(.logado) > a {
    justify-content: center;
    min-width: 155px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px;
    background: var(--c-white);
    color: var(--c-navy);
    font-weight: var(--fw-black);
    text-transform: uppercase;
}
.site-header .menu > li.participar:not(.logado) > a:hover {
    background: var(--c-pink);
    color: var(--c-white);
}
.site-header .menu > li.participar:not(.logado) > a:focus-visible {
    outline-color: var(--c-navy);
}

/* ---- Logado: bloco "Olá, Nome" + dropdown (Bootstrap data-toggle) --------- */
.site-header .menu > li.participar.logado {
    position: relative;
    width: 225px;
    align-self: stretch;
    height: var(--header-h);
    margin: 0;
}
.site-header__user-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: var(--c-pink);
    color: var(--c-white);
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-black);
    line-height: var(--lh-small);
    text-align: center;
    overflow-wrap: anywhere;   /* nomes longos quebram (mock "MasterNomedaSilvaFerreira") */
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
    height: 100%;
    min-height: var(--header-h);
}
.site-header__user-toggle:hover,
.site-header .dropdown.show > .site-header__user-toggle {
    background: var(--c-brand-b);
}
.site-header .site-header__user-toggle:focus-visible {
    outline-color: var(--c-white);
}

/* submenu: itens 225x50 #f1f1f1, texto navy 900 14/21 centrado, sem divisórias */
.site-header .site-header__submenu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: var(--z-menu);
    display: none;
    float: none;
    width: 225px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--c-surface-1);
    box-shadow: none;
    list-style: none;
}
.site-header .dropdown.show > .site-header__submenu,
.site-header .dropdown:hover > .site-header__submenu,
.site-header .dropdown:focus-within > .site-header__submenu {
    display: block;
}
.site-header .site-header__submenu a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 50px;
    padding: 0 14px;
    background: var(--c-surface-1);
    color: var(--c-navy);
    font-size: var(--fs-small);
    font-weight: var(--fw-black);
    line-height: var(--lh-small);
    text-align: center;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease);
}
/* hover do item: [NÃO VERIFICADO] (proposta #e3e3e3, sem token → usa hover neutro) */
.site-header .site-header__submenu a:hover {
    background: var(--c-hover-neutral);
    color: var(--c-navy);
}

/* ---- Hambúrguer (legado .abrirMenu + .bar1/2/3): só mobile ---------------- */
.site-header .abrirMenu {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 7px 0 0;       /* ícone de 24px termina em x=375 (XD) */
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.site-header .abrirMenu .bar1,
.site-header .abrirMenu .bar2,
.site-header .abrirMenu .bar3 {
    position: absolute;
    left: 8px;
    display: block;
    width: 24px;
    height: 3px;
    margin: 0;
    border-radius: var(--radius-xs);
    background: var(--c-white);
    transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.site-header .abrirMenu .bar1 { top: 11px; }
.site-header .abrirMenu .bar2 { top: 18px; }
.site-header .abrirMenu .bar3 { top: 25px; }
/* estado aberto: hambúrguer → X (XD: menu_24dp → close_24dp) */
.site-header .abrirMenu.change .bar1 { transform: translateY(7px) rotate(-45deg); }
.site-header .abrirMenu.change .bar2 { opacity: 0; }
.site-header .abrirMenu.change .bar3 { transform: translateY(-7px) rotate(45deg); }
.site-header .abrirMenu:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 0;
    border-radius: var(--radius-xs);
}

/* Header interno mobile (XD [09]): hambúrguer rosa sobre barra navy */
.site-header:has(.participar.logado) .abrirMenu .bar1,
.site-header:has(.participar.logado) .abrirMenu .bar2,
.site-header:has(.participar.logado) .abrirMenu .bar3 {
    background: var(--c-pink);
}

/* ==========================================================================
   MOBILE (428) — painel #cfcfcf com linhas de 80px (XD "Menu_Hamburguer" aberto)
   ========================================================================== */
@media (max-width: 991.98px) {
    .site-header__inner {
        padding-inline: 38px;
    }
    .site-header__brand img {
        height: 48px;
        max-height: 48px;
    }
    .site-header .abrirMenu {
        display: block;
    }
    .site-header__nav {
        align-self: center;
        margin-left: 0;
    }

    /* painel: sobrepõe o conteúdo (não empurra). Fechado = invisible, fora da
       ordem de tabulação; a transição (200ms) só roda com movimento permitido. */
    .site-header .menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: var(--z-menu);
        display: block;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        background: var(--c-border-soft);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
    }
    .site-header .menu.active {
        visibility: visible;
        opacity: 1;
        transform: none;
        height: auto;
        background: var(--c-border-soft);
        transition-delay: 0s;
    }
    .site-header .menu > li {
        display: block;
        width: auto;
    }
    .site-header .menu > li > a {
        box-sizing: border-box;
        min-height: 80px;
        padding: 0 var(--sp-7);          /* decisão spec-B §4.3: 40px em todas as linhas */
        color: var(--c-navy);
        white-space: normal;
    }
    /* hover de linha: [NÃO VERIFICADO] */
    .site-header .menu > li > a:hover,
    .site-header .menu > li > a[aria-current="page"],
    .site-header .menu > li > a.is-active {
        background: var(--c-white);
        color: var(--c-pink);
        box-shadow: none;
    }
    .site-header .menu > li > a:focus-visible,
    .site-header .site-header__submenu a:focus-visible {
        outline-color: var(--c-navy);
    }

    /* CTA mobile: linha navy, texto branco 600 (não uppercase, "Cadastre-se") */
    .site-header .menu > li.participar:not(.logado) > a {
        justify-content: flex-start;
        min-width: 0;
        height: calc(var(--sp-7) * 2);
        min-height: calc(var(--sp-7) * 2);
        padding-block: 0;
        background: var(--c-navy);
        color: var(--c-white);
        font-weight: var(--fw-semibold);
        text-transform: none;
    }
    .site-header .menu > li.participar:not(.logado) > a:hover {
        background: var(--c-pink);
        color: var(--c-white);
    }
    .site-header .menu > li.participar:not(.logado) > a:focus-visible {
        outline-color: var(--c-white);
    }

    /* logado: "Olá, Nome" vira linha navy de 80px e o submenu fica sempre aberto
       e na vertical, logo abaixo (XD "Main Menu – Mobile Interno") */
    .site-header .menu > li,
    .site-header .menu > li.participar {
        height: auto;
    }
    .site-header .menu > li.participar.logado {
        width: auto;
        height: auto;
    }
    .site-header__user-toggle {
        justify-content: flex-start;
        box-sizing: border-box;
        min-height: 80px;
        padding: 0 var(--sp-7);
        background: var(--c-navy);
        font-size: var(--fs-button);
        font-weight: var(--fw-semibold);
        line-height: 25px;
        text-align: left;
        cursor: default;
        pointer-events: none;            /* no mobile o rótulo não abre nada */
    }
    .site-header__user-toggle br {
        display: none;
    }
    .site-header .site-header__submenu,
    .site-header .dropdown:hover > .site-header__submenu {
        position: static;
        display: block;
        width: auto;
        background: transparent;
    }
    .site-header .site-header__submenu a {
        justify-content: flex-start;
        height: auto;
        min-height: 80px;
        padding: 0 var(--sp-7);
        background: transparent;
        font-size: var(--fs-button);
        font-weight: var(--fw-semibold);
        line-height: 25px;
        text-align: left;
    }
    .site-header .site-header__submenu a:hover {
        background: var(--c-white);
        color: var(--c-pink);
    }
}
@media (max-width: 991.98px) {
    header.site-header .menu > li.participar { padding: 0; }
    header.site-header .menu > li.participar:not(.logado) > a { padding-inline: var(--sp-7); }
}


@media (prefers-reduced-motion: reduce) {
    .site-header .menu,
    .site-header .abrirMenu .bar1,
    .site-header .abrirMenu .bar2,
    .site-header .abrirMenu .bar3,
    .site-header .menu > li > a,
    .site-header__user-toggle,
    .site-header .site-header__submenu a {
        transition: none;
    }
}

/* Feedback de design: `header .menu li:nth-last-child(n+2) a` (style-default.min.css, especificidade 0,2,3) forçava 14px nos itens;
   o XD usa o tamanho do corpo (16px). Seletor com especificidade maior, sem !important. */
header.site-header .menu > li:nth-last-child(n+2) > a { font-size: var(--fs-body); }
/* idem para hover/foco: o sistema define `color: var(--primary)` + transição de 0.5s com a mesma regra legada. */
header.site-header .menu > li:nth-last-child(n+2) > a:hover,
header.site-header .menu > li:nth-last-child(n+2) > a:focus {
    color: var(--c-pink);
    transition: color var(--t-fast);
    /* XD: hover é só a cor — sem fundo, sombra ou borda (o sistema acrescenta box-shadow inset e border-bottom amarelo) */
    box-shadow: none;
    border-bottom: 0;
    background: transparent;
}

/* XD: o CTA não tem a seta "»" no hover (header .menu li.participar:after/:before do sistema). */
header.site-header .menu li.participar::before,
header.site-header .menu li.participar::after { content: none; display: none; }

/* Alta prioridade: `header .menu {overflow-y:hidden}` (style-default.min.css) cortava o dropdown "Olá, Nome" (hover/clique).
   No desktop o menu precisa deixar o submenu vazar; no mobile o painel mantém overflow-y:auto (regra acima). */
@media (min-width: 992px) {
    header.site-header .menu { overflow: visible; }
}

/* ===== components/footer.css ===== */
/* ==========================================================================
   Design System — RODAPÉ  (.site-footer)
   Spec: docs/ds/spec-B-global-e-conteudo.md §5.1 (desktop), §5.2 (mobile),
         §2 (tipografia "Rodapé …"), §3 (cores) e mapa-xd/A "Footer".
   Artboards XD: "Rodapé – Desktop" (todas as telas públicas/internas,
         ex.: [02] y=3265, [12], [18], [20]) e "Rodapé Mobile" [03] y=3242.
   Estrutura: bloco navy (280 desktop) + faixa rosa "Desenvolvido por" (46/47px).
   Hooks LEGADOS preservados (site-templates/_footer.html):
     a.btn_share (botão flutuante WhatsApp, só aparece em body.home como hoje),
     .footer_line · ul.socials · ul.footer_menu · .footer_final · .logo_footer,
     condicionais {{#social.*}} (cada rede é um <li> independente).
   Breakpoint: mobile <= 991.98px (desktop primeiro, mobile sobrescreve).
   ========================================================================== */

.site-footer {
    position: relative;
    background: var(--c-navy);
    color: var(--c-offwhite);
    font-family: var(--font-sans);
}

.site-footer a {
    color: var(--c-white);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}
/* hover de links e ícones: [NÃO VERIFICADO] (XD não exportou) — proposta #ff245c */
.site-footer a:hover {
    color: var(--c-pink);
}
.site-footer a:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ---- Bloco principal ------------------------------------------------------ */
.site-footer__main {
    min-height: 280px;
    box-sizing: border-box;
    padding-block: 48px 0;     /* altura final = min-height 280 (XD); o conteúdo da coluna direita (4 links) termina em ≈ +272 */
}
.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 757px) auto;
    justify-content: space-between;
    column-gap: var(--sp-9);
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--page-pad-x));
    margin-inline: auto;
    padding-inline: var(--page-pad-x);
}

/* Coluna esquerda: logo + texto legal */
.site-footer__logo,
.site-footer .logo_footer {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 60px;          /* Gabarito [22]: altura máxima 60px */
    margin: 0 0 67px;          /* texto legal começa ≈ +175 do topo do rodapé */
}
.site-footer__legal {
    margin: 0;
    color: var(--c-offwhite);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 24px;
}
.site-footer__legal a {
    color: inherit;
    text-decoration: underline;
}

/* Coluna direita: NAS REDES + ícones + links (alinhada ao canto direito) */
.site-footer__aside {
    padding-top: 24px;         /* NAS REDES em +73 (XD) */
}
.site-footer__title {
    margin: 0 0 28px;          /* ícones em +127 (XD) */
    color: var(--c-offwhite);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 26px;         /* XD 25.8 */
    text-transform: none;
}
.site-footer__title + .socials {
    margin-top: 0;
}

/* Ícones sociais — FA6 Brands 30px #fbfbfb, gap 26px (XD: passo 56–64px) */
.site-footer .socials {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0 0 14px;          /* primeiro link em +165 (XD) */
    padding: 0;
    list-style: none;
}
.site-footer .socials li {
    margin: 0;
    padding: 0;
}
.site-footer .socials a,
.site-footer__social {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-offwhite);
    font-size: 30px;
    line-height: 1;
}
.site-footer .socials a:hover {
    background: transparent;
    color: var(--c-pink);
}

/* Links institucionais: 400 12.5/15, passo 27px */
.site-footer .footer_menu,
.site-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer .footer_menu li,
.site-footer__links li {
    display: block;            /* o reset do sistema deixa `.footer_menu li` inline */
    margin: 0 0 12px;
    padding: 0;
    font-size: 12.5px;
    font-weight: var(--fw-regular);
    line-height: 15px;
}
.site-footer .footer_menu a,
.site-footer__links a {
    color: var(--c-white);
    font-size: inherit;
    font-family: var(--font-sans);
}

/* ---- Faixa "Desenvolvido por" (46px, rosa) ---------------------------------- */
.site-footer__credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    box-sizing: border-box;
    min-height: 46px;
    margin: 0;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-pink);
    color: var(--c-white);
    font-size: 12px;
    font-weight: var(--fw-medium);
    line-height: 28.8px;
}
.site-footer__credit.footer_final {
    background: var(--c-pink);
}
.site-footer__credit small {
    font-size: inherit;
    line-height: inherit;
}
.site-footer__credit .fa-heart {
    font-size: 10px;
}
.site-footer__credit a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.site-footer__credit svg {
    display: block;
    width: auto;
    height: 22.64px;
}
.site-footer__credit a:hover svg {
    opacity: .8;
}

/* ---- Botão flutuante WhatsApp (legado) ---------------------------------------
   Fora do XD. Comportamento atual mantido: oculto, exceto em body.home, onde é
   um círculo centralizado na borda superior do rodapé. Sem sombra (design flat). */
.site-footer .btn_share {
    display: none;
}
.home .site-footer .btn_share {
    position: absolute;
    top: -25px;
    left: calc(50% - 25px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 4px solid var(--c-white);
    border-radius: var(--radius-pill);
    background: var(--g-brand-vert);
}
.home .site-footer .btn_share .text__round {
    display: none;
}
.home .site-footer .btn_share img {
    max-height: 22px;
}

/* ==========================================================================
   MOBILE (428): coluna única centralizada
   ordem: logo → NAS REDES → ícones → texto → links → faixa
   ========================================================================== */
@media (max-width: 991.98px) {
    .site-footer__main {
        min-height: 559px;
        padding-block: 48px 26px;
    }
    .site-footer__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: 33px;
        text-align: center;
    }
    /* os dois wrappers somem da árvore de layout para reordenar os filhos */
    .site-footer__about,
    .site-footer__aside {
        display: contents;
    }
    .site-footer__logo,
    .site-footer .logo_footer { order: 1; margin: 0 auto 68px; }
    .site-footer__title       { order: 2; margin: 0 0 22px; line-height: var(--lh-h3); color: var(--c-white); }
    .site-footer .socials     { order: 3; justify-content: center; gap: 30px; margin: 0 0 29px; }
    .site-footer__legal       { order: 4; max-width: 363px; margin: 0 0 83px; color: var(--c-white); line-height: var(--lh-small); }
    .site-footer .footer_menu,
    .site-footer__links       { order: 5; }
    .site-footer .footer_menu li,
    .site-footer__links li    { display: block; margin: 0 0 12px; }

    .site-footer__credit {
        min-height: 47px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-footer a,
    .site-footer__credit svg {
        transition: none;
    }
}

/* A11y: o banner de cookies é fixo e cobria o fim da página; enquanto ativo, reserva espaço no fim do body. */
body:has(#mensagem_privacidade.active) { padding-bottom: 96px; }
@media (max-width: 991.98px) {
    body:has(#mensagem_privacidade.active) { padding-bottom: 220px; }
}

/* A11y: alvo de toque >= 44px nos ícones sociais sem mudar o tamanho visual do ícone. */
.site-footer .socials a,
.site-footer__social {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* mantém a altura do bloco (XD: 280) apesar da área de toque de 44px (ícone visual = 30px) */
.site-footer .socials a,
.site-footer__social { margin-block: -9px; }

/* A11y mobile: links institucionais e botões do banner com alvo >= 44px (rodapé mobile mais alto é aceito — D9). */
@media (max-width: 991.98px) {
    .site-footer .footer_menu a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    #mensagem_privacidade .button-cookies { min-height: 44px; }
}
@media (max-width: 991.98px) {
    #mensagem_privacidade .btn.button-cookies { min-height: 44px; }
    .site-footer__credit a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Feedback de design: o XD não tem a borda superior do rodapé (vinha de `footer .footer_line` do CSS do sistema). */
footer.site-footer .footer_line { border-top: 0; border-bottom: none; }

/* Feedback de design (desktop): logo do rodapé maior que a do header (XD ≈ 272x88) e respiro inferior de 40px. */
@media (min-width: 992px) {
    .site-footer .site-footer__logo,
    .site-footer .logo_footer {
        width: 272px;
        height: 88px;
        max-width: unset;
        max-height: unset;
        object-fit: contain;
        object-position: 0;
        margin: 0 0 27px;
    }
    .site-footer__main {
        padding-block: 48px 40px;
        min-height: 320px;
    }
}

/* ===== components/sections.css ===== */
/* ==========================================================================
   Design System — SEÇÕES, TÍTULO DE SEÇÃO, HERO, TEXTO JURÍDICO, CARTÃO PDF
   Spec: docs/ds/spec-B-global-e-conteudo.md §1.1–§1.3 (grid, ritmo, fundos),
         §2 (tipografia), §7.1 (título de seção), §7.2 (hero), §7.5 (palco de
         prêmios), §7.7 (PDF do Regulamento), §7.8 (texto jurídico).
   Artboards XD: Home [02] desktop / [03] mobile; Gabarito [22];
         Regulamento [12][13]; Política [14][15]; Termos [16][17].
   NÃO definido aqui (pertence ao panel.css): .page-shell / .page-card (cartão
   branco 1159 r20). Reutilize-os nas páginas internas.
   Breakpoint: mobile <= 991.98px (desktop primeiro, mobile sobrescreve).
   Caminhos de imagem são relativos a css/ds.css (build) → ../images/ds/.
   ========================================================================== */

/* ---- Contêiner de conteúdo (fundos full-bleed, conteúdo 1160 centralizado) - */
.section__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--page-pad-x));
    margin-inline: auto;
    padding-inline: var(--page-pad-x);
}

/* ---- Seção base: respiro vertical de 120px (mobile 50px) -------------------- */
.section {
    position: relative;
    isolation: isolate;          /* camadas de fundo ficam atrás do conteúdo */
    box-sizing: border-box;
    padding-block: var(--sp-10);
    color: var(--c-white);
    font-family: var(--font-sans);
}

.section--navy {
    --section-title-color: var(--c-pink);   /* H1 rosa sobre navy (spec §2) */
    background: var(--c-navy);
}

.section--brand {
    background: var(--g-brand-diag);
}

/* Fundo com foto + sobreposição colorida (spec §1.3).
   Personalizável: style="--section-photo:url(…);--section-overlay:…;--section-overlay-opacity:.7" */
.section--photo {
    background: var(--section-photo, none) center / cover no-repeat var(--c-brand-b);
}
.section--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--section-overlay, transparent);
    opacity: var(--section-overlay-opacity, .7);
    pointer-events: none;
}

/* AVIF com fallback WebP nas fotos de seção (custom property não tem fallback por declaração). */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .section--produtos { --section-photo: image-set(url("../images/ds/bg-ondas.avif") type("image/avif"), url("../images/ds/bg-ondas.webp") type("image/webp")); }
    .section--premios  { --section-photo: image-set(url("../images/ds/bg-premios.avif") type("image/avif"), url("../images/ds/bg-premios.webp") type("image/webp")); }
}

/* Produtos participantes: foto + #ff245c op .7 (desktop) / #ef5942 op .7 (mobile) */
.section--produtos {
    --section-photo: url("../images/ds/bg-ondas.webp");
    --section-overlay: var(--c-pink);
    --section-overlay-opacity: .7;
}

/* Prêmios: preserva o hard-light do XD; opacidade .8 calibra o laranja
   para reduzir a saturação avermelhada percebida no navegador. */
.section--premios {
    --section-photo: url("../images/ds/bg-premios.webp");
    --section-overlay: var(--g-brand-vert);
    --section-overlay-opacity: .8;
    padding-bottom: 0;            /* a arte toca o rodapé (spec §1.2) */
}
.section--premios::before {
    mix-blend-mode: hard-light;
}

/* ---- Título de seção: H1 + lead (spec §7.1) ---------------------------------- */
.section-title {
    margin: 0 auto 52px;
    text-align: center;
}
.section-title__heading {
    margin: 0;
    color: var(--section-title-color, var(--c-white));
    font-family: var(--font-sans);
    font-size: var(--fs-h1);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h1);
    text-transform: uppercase;
}
.section-title__lead {
    max-width: 637px;
    margin: 10px auto 0;
    color: var(--c-white);
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-lead);
}
.section-title--wide .section-title__lead { max-width: 787px; }
.section-title--light .section-title__heading { color: var(--c-white); }   /* sobre rosa/gradiente (FAQ) */
.section-title--dark .section-title__heading { color: var(--c-navy); }     /* sobre fundo claro */
.section-title--dark .section-title__lead { color: var(--c-text); }

/* Linha de CTA ao fim da seção (botão 50px abaixo do conteúdo) */
.section__cta {
    margin-top: 50px;
    text-align: center;
}

/* ==========================================================================
   HERO (Banner – Header)  spec §1.2 / §7.2 — [02] 668px · [03] 826px
   Marcação: .hero > .hero__inner > (.hero__text, .hero__art, .hero__cta)
   ========================================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 668px;
    padding-block: 60px;
    background: url("../images/ds/bg-ondas.webp") center / cover no-repeat var(--c-brand-b);
    background: image-set(url("../images/ds/bg-ondas.avif") type("image/avif"), url("../images/ds/bg-ondas.webp") type("image/webp")) center / cover no-repeat var(--c-brand-b);
    color: var(--c-white);
    font-family: var(--font-sans);
}
/* desktop: foto por baixo + gradiente diagonal op .8 por cima */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--g-brand-diag);
    opacity: .8;
    pointer-events: none;
}
.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 466px) minmax(0, 664px);
    grid-template-areas:
        "text art"
        "cta  art";
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--page-pad-x));
    margin-inline: auto;
    padding-inline: var(--page-pad-x);
}
.hero__text {
    grid-area: text;
    text-align: center;
}
.hero__title {
    margin: 0;
    color: var(--c-white);
    font-size: var(--fs-display);
    font-weight: var(--fw-black);
    line-height: var(--lh-display);
}
.hero__logo {
    display: block;
    width: 100%;
    max-width: 466px;
    height: auto;
    margin: -28px auto -44px;     /* a imagem tem margem transparente; encosta nos títulos */
}
.hero__subtitle {
    margin: 0;
    color: var(--c-white);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: 46px;
}
.hero__cta {
    grid-area: cta;
    align-self: start;
    margin-top: var(--sp-7);
    text-align: center;
}

/* arte: tênis + círculos (posições em % da arte 664x542 do XD) */
.hero__art {
    grid-area: art;
    position: relative;
    width: 100%;
    aspect-ratio: 664 / 542;
    margin: 0;
}
.hero__art::before,
.hero__art::after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
}
.hero__art::before {             /* círculo rosa ⌀462 */
    left: 31.2%;
    top: 12%;
    width: 69.6%;
    background: var(--c-pink-soft);
}
.hero__art::after {              /* círculo navy ⌀293 */
    left: 13.7%;
    top: 53.9%;
    width: 44.1%;
    background: var(--c-navy);
}
.hero__shoe {
    position: absolute;
    left: 0;
    top: 16.4%;
    z-index: 1;
    width: 100%;
    height: auto;
}
.hero__caption {
    position: absolute;
    left: 75.4%;
    top: 87.9%;
    z-index: 2;
    margin: 0;
    color: var(--c-white);
    font-size: var(--fs-caption);
    font-weight: var(--fw-light);
    line-height: var(--lh-caption);
    white-space: nowrap;
}

/* ==========================================================================
   PALCO DE PRÊMIOS  (.prize-stage): arte à esquerda + caixa à direita
   Medidas do XD [02] (desk 466x270) e [03] (mob 347x220). Caixa = cards.css.
   ========================================================================== */
.prize-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 466px);
    column-gap: var(--gutter-card);
    align-items: start;
}
.prize-stage__art {
    position: relative;
    justify-self: end;
    width: min(713px, calc(100% + 49px));   /* a arte invade 49px da lateral (XD x=54) */
    aspect-ratio: 713 / 551;
    margin: 0;
}
.prize-stage__art img {
    position: absolute;
    height: auto;
}
.prize-stage__banner { left: 15.4%; top: 0;     width: 76%;   }
.prize-stage__phones { left: 44.7%; top: 3.1%;  width: 20.3%; }
.prize-stage__coins  { left: 6.9%;  top: 10.3%; width: 35.1%; }
.prize-stage__car    { left: 0;     top: 23.2%; width: 100%;  }
.prize-stage__girl   { left: 66.2%; top: 12.3%; width: 33.8%; transform: scaleX(-1); }   /* espelhada (pedido de design) */
.prize-stage__art .caption-illustrative {
    position: absolute;
    left: 6.9%;
    top: 82%;
    z-index: 2;
}
.prize-stage__info {
    padding-top: 100px;           /* caixa começa 100px abaixo do topo da arte */
}
.prize-stage__info .btn {
    margin-top: var(--sp-6);
}

/* ==========================================================================
   TEXTO JURÍDICO (Política de Privacidade / Termos de Uso) — spec §7.8
   Envolve o HTML livre vindo do admin; estiliza por tag. Sem marcadores
   desenhados no XD: listas com recuo +30px e marcadores padrão [NÃO VERIFICADO].
   ========================================================================== */
.legal-text {
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}
.legal-text > :first-child { margin-top: 0; }
.legal-text > :last-child { margin-bottom: 0; }
.legal-text h1,
.legal-text h2 {
    margin: 48px 0 var(--sp-4);
    color: var(--c-text);
    font-size: var(--fs-h1);       /* XD: 500 38/48 (único título Medium do sistema) */
    font-weight: var(--fw-medium);
    line-height: var(--lh-h1);
}
.legal-text h3 {
    margin: var(--sp-7) 0 var(--sp-3);
    color: var(--c-text);
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h2);
}
.legal-text h4,
.legal-text h5,
.legal-text h6 {
    margin: var(--sp-5) 0 var(--sp-2);
    color: var(--c-text);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-lead);
}
.legal-text p { margin: 0 0 var(--sp-4); }
.legal-text ul,
.legal-text ol {
    margin: 0 0 var(--sp-4);
    padding-left: 30px;
}
.legal-text li { margin: 0 0 var(--sp-2); }
.legal-text strong,
.legal-text b { font-weight: var(--fw-bold); }
.legal-text a {
    color: var(--c-pink);
    text-decoration: underline;     /* link em texto não desenhado no XD [NÃO VERIFICADO] */
}
.legal-text a:hover { color: var(--c-brand-b); }
.legal-text a:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 2px;
}
/* termos vazios: não renderiza cartão "em branco" sem mensagem */
.legal-text:empty::before {
    content: "Nenhum conteúdo registrado no momento.";
    color: var(--c-text-muted);
}

/* Cartões de páginas institucionais (Regulamento/Política/Termos/Sorteios):
   diferem dos painéis de participante por usar padding superior de 30px. */
.page-card--content {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ==========================================================================
   CARTÃO PDF (Regulamento) — spec §7.7
   Envolve <iframe>/<embed>/<object> do PDF. O admin grava o iframe com
   width="100%" height="800px" style="border:none" → sobrescrita com !important
   (estilo inline) para seguir a proporção do XD: 1099x662 desk / 307x456 mob.
   ========================================================================== */
.pdf-card {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.pdf-card:has(> iframe, > embed, > object) { aspect-ratio: 1099 / 662; }
.pdf-card iframe,
.pdf-card embed,
.pdf-card object {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;      /* atributo/inline do admin */
    height: 100% !important;     /* inline height:800px do admin */
    border: 0 !important;        /* inline border:none do admin */
}
.pdf-card__fallback {
    margin: var(--sp-4) 0 0;
    color: var(--c-text);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    text-align: center;
}

/* ==========================================================================
   MOBILE (428)
   ========================================================================== */
@media (max-width: 991.98px) {
    .section__inner {
        padding-inline: var(--page-pad-x-mobile);
    }
    .section {
        padding-block: 50px;
    }
    .section--produtos {
        --section-overlay: var(--c-brand-a);
    }
    .section--premios {
        padding-bottom: 50px;
    }
    .section--navy {
        min-height: 697px;
    }
    .section--produtos {
        min-height: 828px;
    }
    .section--premios {
        min-height: 791px;
    }

    .section-title {
        margin-bottom: 50px;
    }
    .section-title__lead,
    .section-title--wide .section-title__lead {
        max-width: 347px;
    }
    .section__cta {
        margin-top: 50px;
    }

    /* hero: gradiente por baixo + foto op .6 por cima; texto centrado, arte full-bleed, botão no fim */
    .hero {
        display: block;
        min-height: 826px;
        height: auto;
        padding-block: 46px 52px;
        background: var(--g-brand-diag);
    }
    .hero::before {
        background: url("../images/ds/bg-ondas.webp") center / cover no-repeat;
        background: image-set(url("../images/ds/bg-ondas.avif") type("image/avif"), url("../images/ds/bg-ondas.webp") type("image/webp")) center / cover no-repeat;
        opacity: .6;
    }
    .hero__inner {
        display: flex;
        flex-direction: column;
        padding-inline: var(--page-pad-x-mobile);
    }
    .hero__logo {
        width: 385px;
        max-width: none;
        margin: -30px 0 -45px calc(50% - 192.5px);
    }
    .hero__subtitle {
        line-height: var(--lh-display);
    }
    .hero__art {
        align-self: stretch;
        width: auto;
        aspect-ratio: 428 / 300;
        margin: -32px calc(-1 * var(--page-pad-x-mobile)) 0;   /* arte 428 full-bleed */
    }
    .hero__art::before {
        left: 33.9%;
        top: 6.3%;
        width: 58.4%;
    }
    .hero__art::after {
        left: 10.3%;
        top: 32.7%;
        width: 46.7%;
    }
    .hero__shoe {
        top: 0;
    }
    .hero__caption {
        left: 58.9%;
        top: 94.7%;
        font-size: 8px;
    }
    .hero__cta {
        align-self: center;
        margin-top: var(--sp-8);
    }

    /* palco de prêmios: arte 348 + caixa 347 sobrepondo 21px */
    .prize-stage {
        display: block;
    }
    .prize-stage__art {
        width: 100%;
        max-width: 348px;
        margin-inline: auto;
    }
    .prize-stage__info {
        position: relative;
        z-index: 1;
        margin-top: -21px;
        padding-top: 0;
        text-align: center;
    }

    /* texto jurídico: H2 28/38 (XD mobile não medido) */
    .legal-text h1,
    .legal-text h2 {
        margin-top: var(--sp-7);
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
    }
    .legal-text h3 {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }

    /* PDF mobile 307x456 */
    .pdf-card:has(> iframe, > embed, > object) {
        aspect-ratio: 307 / 456;
    }
}

/* A11y (revisão WF-11078): o título do hero agora é <h1>; zera margens/estilo de h1 do base para manter o visual do XD. */
h1.hero__title { margin-top: 0; margin-bottom: 0; text-transform: none; }

/* A11y: o CSS do sistema pinta qualquer elemento de preto (`* {color:#000}`); o conteúdo vindo do admin deve herdar o texto jurídico do XD (500 / #424344). */
.legal-text :where(p, li, span, div, td, th, strong, em, a) { color: inherit; font-weight: inherit; }
.legal-text :where(a) { text-decoration: underline; }

/* ===== components/cards.css ===== */
/* ==========================================================================
   Design System — CARDS: passo "Como participar", produto (+ carrossel), prêmios
   Spec: docs/ds/spec-B-global-e-conteudo.md §6 (setas), §7.3 (step-card),
         §7.4 (product-card + carrossel), §7.5 (prize-box), §2 (tipografia).
   Artboards XD: Home [02] desktop / [03] mobile / Gabarito [22].
   Carrossel da Home = SWIPER (js/script-swiper.js, .swiper/.swiper-wrapper/
   .swiper-slide/.swiper-button-next|prev) — NÃO Slick. As setas do Swiper são
   reestilizadas aqui (mesma aparência de .carousel-arrow), classes preservadas.
   Ícones: FA6 Solid (self-hosted). Material Icons do XD não são hospedados →
   equivalentes FA: cart-plus, display, ticket, gift [NÃO VERIFICADO design].
   Breakpoint: mobile <= 991.98px (desktop primeiro).
   ========================================================================== */

:root {
    --card-prod-w: 367px;
    --card-prod-h: 316px;
}

/* ---- Legenda "*Imagem meramente ilustrativa" (Light 10/28) ------------------ */
.caption-illustrative {
    margin: 0;
    color: var(--c-text-caption);
    font-size: var(--fs-caption);
    font-weight: var(--fw-light);
    line-height: var(--lh-caption);
}
.caption-illustrative--light { color: var(--c-white); }   /* sobre fundo colorido */

/* ==========================================================================
   STEP-CARD "Como participar" — 268x268 r20, gradiente, borda 3px #ff5c85
   Marcação: .steps > .step-card > (i.step-card__icon, h3.step-card__title, p.step-card__text)
   ========================================================================== */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 268px);
    justify-content: space-between;
    gap: var(--gutter-card);
    margin: 0;
    padding: 0;
    list-style: none;
}
.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 268px;
    height: 268px;
    padding: 34px 30px 0;
    border: var(--border-card);
    border-radius: var(--radius-lg);
    background: var(--g-brand-diag);
    color: var(--c-white);
    font-family: var(--font-sans);
    text-align: center;
}
.step-card__icon {
    margin: 0 0 var(--sp-4);
    font-size: 56px;
    line-height: 56px;
}
.step-card__title {
    margin: 0 0 var(--sp-3);
    font-size: 28px;
    font-weight: var(--fw-semibold);
    line-height: 28px;
}
.step-card__text {
    margin: 0;
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    line-height: var(--lh-lead);
}

/* ==========================================================================
   PRODUCT-CARD — imagem 367x316 r20 (#f1f1f1 + wave op .6) + nome + série
   Marcação: .product-card > (.product-card__media > img + .caption-illustrative,
             .product-card__name, .product-card__serial)
   ========================================================================== */
.product-card {
    width: 100%;
    max-width: var(--card-prod-w);
    margin: 0;
    color: var(--c-white);
    font-family: var(--font-sans);
    text-align: center;
}
.product-card__media {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 367 / 316;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--c-surface-1);
}
.product-card__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/ds/bg-card-produto.webp") center / cover no-repeat;
    background: image-set(url("../images/ds/bg-card-produto.avif") type("image/avif"), url("../images/ds/bg-card-produto.webp") type("image/webp")) center / cover no-repeat;
    opacity: .6;
}
.product-card__media img {
    display: block;
    width: 81.7%;              /* 300 / 367 */
    height: auto;
    max-height: 79%;
    object-fit: contain;
}
.product-card__media .caption-illustrative {
    position: absolute;
    right: 10px;
    bottom: 0;
}
.product-card__name {
    margin: var(--sp-5) 0 0;
    font-size: var(--fs-h2);
    font-size: 24px;
    font-weight: var(--fw-bold);
    line-height: 34px;
    overflow-wrap: anywhere;
}
.product-card__serial {
    margin: 0;
    font-size: 22px;
    font-weight: var(--fw-light);
    line-height: 32px;
}

/* ---- Carrossel de produtos: janela de 3 cards (desktop) / 1 (mobile) ----- */
.product-carousel {
    position: relative;
}
.product-carousel__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter-card);
    justify-items: center;
}
/* Swiper: cada slide recebe .product-card; o wrapper vira a janela */
.product-carousel .swiper-slide { height: auto; }

/* ---- Setas (spec §6): ⌀80 borda 2px; ativa navy/ícone branco; desativada #cfcfcf */
.carousel-arrow,
.product-carousel .swiper-button-prev,
.product-carousel .swiper-button-next {
    position: absolute;
    top: calc(var(--card-prod-h) / 2);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    margin: -40px 0 0;
    padding: 0;
    border: var(--border-arrow);
    border-color: var(--c-navy);
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--c-white);
    font-family: var(--font-icon-solid);
    font-size: 38px;
    font-weight: 900;
    line-height: 48px;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.carousel-arrow--prev,
.product-carousel .swiper-button-prev { left: -39px; right: auto; }
.carousel-arrow--next,
.product-carousel .swiper-button-next { right: -39px; left: auto; }
.carousel-arrow--prev::before,
.product-carousel .swiper-button-prev::after { content: "\f104"; }
.carousel-arrow--next::before,
.product-carousel .swiper-button-next::after { content: "\f105"; }
.carousel-arrow::before,
.product-carousel .swiper-button-prev::after,
.product-carousel .swiper-button-next::after {
    font-family: var(--font-icon-solid);
    font-size: inherit;
    font-weight: 900;
}
.carousel-arrow:hover:not(:disabled) { background: var(--c-pink); border-color: var(--c-pink); }
.carousel-arrow:disabled,
.carousel-arrow.is-disabled,
.product-carousel .swiper-button-disabled {
    border-color: var(--c-border-soft);
    background: var(--c-border-soft);
    color: var(--c-navy);
    cursor: default;
    opacity: 1;
}
.carousel-arrow:focus-visible,
.product-carousel .swiper-button-prev:focus-visible,
.product-carousel .swiper-button-next:focus-visible {
    outline: 3px solid var(--c-white);
    outline-offset: 3px;
}

/* ==========================================================================
   PRIZE-BOX — 466x270 r20, borda 5px branca, fundo navy + imagem, lista Bold 28
   Marcação: .prize-box > ul.prize-box__list > li  (1 prêmio por linha)
   ========================================================================== */
/* XD: base navy #030b2e + imagem "303" com blend-mode color-dodge (escala 1,39, deslocada -19,7% em X)
   dentro do retângulo com borda branca de 5px e raio 20. A imagem vive em ::before (blend só com o navy). */
.prize-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    max-width: 466px;
    min-height: 270px;
    padding: 20px 25px;
    border: var(--border-prize);
    border-radius: var(--radius-lg);
    background: var(--c-navy);
    color: var(--c-white);
    font-family: var(--font-sans);
    text-align: left;
}
.prize-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("../images/ds/bg-caixa-premios.webp") right top / cover no-repeat;
    background: image-set(url("../images/ds/bg-caixa-premios.avif") type("image/avif"), url("../images/ds/bg-caixa-premios.webp") type("image/webp")) right top / cover no-repeat;
    mix-blend-mode: color-dodge;
    transform: translateX(-29.7%) scale(1.3946);
    transform-origin: left center;
    pointer-events: none;
}
.prize-box__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.prize-box__list li {
    margin: 0;
    color: var(--c-white);      /* o sistema pinta tudo de preto (`* {color:#000}`); XD: #FFFFFF */
    font-size: 28px;
    font-weight: var(--fw-bold);
    line-height: 55px;          /* passo real de linha no XD (o "84" é altura do texto) */
}

/* ==========================================================================
   MOBILE (428)
   ========================================================================== */
@media (max-width: 991.98px) {
    :root {
        --card-prod-h: 316px;
    }
    /* "Como participar" vira carrossel de 1 card 347x268 (scroll-snap, sem JS) */
    .steps {
        display: flex;
        gap: var(--sp-5);
        margin-inline: calc(-1 * var(--page-pad-x-mobile));
        padding-inline: var(--page-pad-x-mobile);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .steps::-webkit-scrollbar { display: none; }
    .step-card {
        flex: 0 0 100%;
        width: auto;
        max-width: 347px;
        scroll-snap-align: center;
        border-width: 5px;
        border-color: var(--c-brand-a);   /* XD mobile: 5px #ef5942 */
    }

    .product-carousel__track {
        display: block;
    }
    .product-carousel__track > .product-card {
        margin-inline: auto;
    }
    .product-carousel__track > .product-card + .product-card { display: none; }  /* 1 por vez na demo estática */
    .product-card__media {
        aspect-ratio: auto;
        height: 316px;
    }
    .carousel-arrow,
    .product-carousel .swiper-button-prev,
    .product-carousel .swiper-button-next {
        width: 60px;
        height: 60px;
        margin-top: -30px;
        font-size: 28px;
        line-height: 38px;
    }
    .carousel-arrow--prev,
    .product-carousel .swiper-button-prev { left: -29px; right: auto; }
    .carousel-arrow--next,
    .product-carousel .swiper-button-next { right: -29px; left: auto; }

    .prize-box {
        min-height: 220px;
        height: auto;
        padding: 18px 12px;
        text-align: center;
    }
    .prize-box__list li {
        font-size: 24px;
        line-height: 43px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-arrow,
    .product-carousel .swiper-button-prev,
    .product-carousel .swiper-button-next { transition: none; }
    .steps { scroll-behavior: auto; }
}

/* Feedback de design (Home): o CSS do sistema pinta h3/p de navy/preto; título e texto dos passos são brancos (#FFF) no XD. */
.steps .step-card .step-card__title,
.steps .step-card .step-card__text { color: var(--c-white); }

/* ===== components/accordion.css ===== */
/* ==========================================================================
   Design System — ACCORDION / FAQ  (.faq)
   Spec: docs/ds/spec-B-global-e-conteudo.md §7.9 · Artboards XD: FAQ [20] / [21].
   Compatível com o markup Bootstrap 4 collapse de site-templates/Pages/_faq.ctp:
     .accordion#accordionFAQ > article.card > .card-header > h2 > button.btn-link[.collapsed]
                             + .collapse[data-parent] > .card-body
   Basta acrescentar a classe `faq` no .accordion. O ícone plus/minus depende
   de `.collapsed` (Bootstrap alterna sozinho) — NÃO do aria-expanded inicial,
   que o _faq.ctp grava como "true" para todos (corrigir na fase global).
   Breakpoint: mobile <= 991.98px (desktop primeiro).
   ========================================================================== */

:root {
    --faq-header-hover: var(--c-navy-hover);     /* cor de sistema do XD (spec §6/§7.9) — hover [NÃO VERIFICADO] */
}

.accordion.faq {
    --faq-answer-color: #707070;
    max-width: var(--container-narrow);
    margin-inline: auto;
    font-family: var(--font-sans);
}
.faq .card {
    margin: 0 0 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.faq .card-header {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.faq .card-header h2,
.faq .card-header h3 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

/* cabeçalho: barra navy 60px r10, pergunta 400 16/26 branca, ícone à direita */
.faq .card-header .btn,
.faq .card-header .btn-link,
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    box-sizing: border-box;
    width: 100%;
    min-height: 60px;
    padding: var(--sp-2) 20px;
    border: 0;
    border-radius: var(--radius);
    background: var(--c-navy);
    color: var(--c-white);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-align: left;
    text-decoration: none;
    white-space: normal;
    transition: background var(--t-fast) var(--ease);
}
.faq .card-header .btn:hover,
.faq .card-header .btn-link:hover,
.faq__question:hover {
    background: var(--faq-header-hover);
    color: var(--c-white);
    text-decoration: none;
}
.faq .card-header .btn:focus,
.faq .card-header .btn-link:focus {
    box-shadow: none;
}
.faq .card-header .btn:focus-visible,
.faq__question:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 3px;
}
/* aberto: cantos inferiores retos para colar no painel [NÃO VERIFICADO] */
.faq .card-header .btn:not(.collapsed),
.faq__question[aria-expanded="true"] {
    border-radius: var(--radius) var(--radius) 0 0;
}

/* ícone FA6 Solid 20px: plus (fechado) / minus (aberto) */
.faq .card-header .btn::after,
.faq__question::after {
    content: "\f068";                 /* minus */
    flex: 0 0 auto;
    font-family: var(--font-icon-solid);
    font-size: 20px;
    font-weight: 900;
    line-height: 42px;
}
.faq .card-header .btn.collapsed::after,
.faq__question[aria-expanded="false"]::after {
    content: "\2b";                   /* plus */
}

/* painel de resposta: #fafafa r10 inferior, texto 400 16/26 #666 */
.faq .collapse .card-body,
.faq .collapsing .card-body,
.faq__answer {
    padding: 30px;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--c-surface-3);
    color: var(--faq-answer-color);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
}
.faq .card-body > :first-child { margin-top: 0; }
.faq .card-body > :last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .faq .card { margin-bottom: var(--sp-3); }          /* XD mobile: passo 70 → gap 10 (12 na escala de 4) */
    .faq .collapse .card-body,
    .faq .collapsing .card-body,
    .faq__answer {
        padding: 20px;
        background: var(--c-white);
        color: var(--faq-answer-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq .card-header .btn,
    .faq__question,
    .faq .collapsing { transition: none; }
}

/* FAQ no XD (20/21): sem cartão branco — título branco e acordeão direto sobre o gradiente de marca. */
@media (max-width: 991.98px) {
    #faq-page .page-card--content.page-card--bare { padding-top: 0; }
}

.page-card.page-card--bare { background: transparent; box-shadow: none; padding-inline: 0; max-width: var(--container-narrow); }
.page-card.page-card--bare > .page-card__title { color: var(--c-white); }

/* ===== components/table.css ===== */
/* ==========================================================================
   Design System — TABELA DE SORTEIOS  (.table-ds)
   Spec: docs/ds/spec-B-global-e-conteudo.md §7.10 · spec-C §5.4 (tabela do painel)
   Artboards XD: Sorteios [18] desktop / [19] mobile.
   Mobile = scroll horizontal dentro do cartão (decisão do spec), com barra de
   rolagem de 5px (trilho #cfcfcf / polegar #707070). NÃO empilha linhas: é o que
   o artboard 19 desenha.
   Compatível com o markup atual de _sorteios.ctp: `.box-sorteio > h4 + .box-inner > table.table`
   (as classes legadas recebem o mesmo visual; recomendado trocar para .table-ds).
   Breakpoint: mobile <= 991.98px.
   ========================================================================== */

:root {
    --table-scroll-thumb: var(--c-border-strong);   /* polegar da rolagem (XD) */
}

/* Título da tabela: Bold 28/38 navy + traço 3px de 80px */
.table-ds-title,
.box-sorteio > h4 {
    margin: 0 0 var(--sp-5);
    color: var(--c-navy);
    font-family: var(--font-sans);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
}
.table-ds-title::after,
.box-sorteio > h4::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    margin-top: 2px;
    background: var(--c-navy);
}

/* Wrapper: raio 10 + rolagem horizontal */
.table-ds-wrap,
.box-sorteio .box-inner {
    margin-bottom: var(--sp-8);
    overflow-x: auto;
    border-radius: var(--radius);
    scrollbar-color: var(--table-scroll-thumb) var(--c-border-soft);
}
.table-ds-wrap::-webkit-scrollbar,
.box-sorteio .box-inner::-webkit-scrollbar { height: 5px; }
.table-ds-wrap::-webkit-scrollbar-track,
.box-sorteio .box-inner::-webkit-scrollbar-track { background: var(--c-border-soft); border-radius: 3px; }
.table-ds-wrap::-webkit-scrollbar-thumb,
.box-sorteio .box-inner::-webkit-scrollbar-thumb { background: var(--table-scroll-thumb); border-radius: 3px; }

.table-ds,
.box-sorteio .table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: var(--c-white);
    color: var(--c-text-strong);
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
}
.table-ds th,
.box-sorteio .table th {
    height: 53px;
    padding: 0 15px;
    border: 0;
    background: var(--c-navy);
    color: var(--c-white);
    font-size: 18px;
    font-weight: var(--fw-semibold);
    line-height: 27px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
.table-ds th:first-child,
.box-sorteio .table th:first-child { padding-left: 30px; border-top-left-radius: var(--radius); }
.table-ds th:last-child,
.box-sorteio .table th:last-child { border-top-right-radius: var(--radius); }

.table-ds td,
.box-sorteio .table td {
    height: 50px;
    padding: var(--sp-2) 15px;
    border: 0;
    border-bottom: 1px solid var(--c-border-soft);   /* divisória fina vista no thumb [18] */
    vertical-align: middle;
}
.table-ds td:first-child,
.box-sorteio .table td:first-child { padding-left: 30px; }
.table-ds tbody tr:nth-child(even) td,
.box-sorteio .table tr:nth-child(even) td { background: var(--c-surface-2); }   /* zebra: 1ª linha branca */
.table-ds td strong,
.box-sorteio .table td strong { font-weight: var(--fw-regular); }
.table-ds .is-prize,
.table-ds td.is-prize { font-size: var(--fs-body); line-height: 25px; }          /* prêmio 16/25 */
.table-ds td[colspan],
.box-sorteio .table td[colspan] { text-align: left; }

@media (max-width: 991.98px) {
    .table-ds-title { font-size: 28px; line-height: 38px; }
    .table-ds,
    .box-sorteio .table { min-width: 597px; }        /* XD 19: 597 (3 col) / 689 (5 col) */
    .table-ds--wide { min-width: 689px; }
    .table-ds-wrap,
    .box-sorteio .box-inner { padding-bottom: var(--sp-2); }
}

/* ===== components/tabs.css ===== */
/* ==========================================================================
   Design System — TABS  (.nav-tabs / .nav-pills + .tab-content)
   Spec: docs/ds/spec-C-formularios-painel-jogos.md §5.2 (abas do Painel 08/09 e
         Detalhes do Atendimento 36/43); spec-B §7.11 (Regulamento com várias abas).
   Bootstrap 4 (data-toggle="tab"): ul.nav.nav-tabs > li.nav-item > a.nav-link[.active]
                                    + .tab-content > .tab-pane
   Desktop: itens iguais, sem gap, 58px; ativa #ff245c com barra navy de 5px.
   Mobile (<= 991.98px): empilhadas, gap 10 (modificador .nav-tabs--flush → gap 0, Detalhes).
   Painel: .nav-tabs + .tab-content = #fafafa, raio 0 0 20 20, padding 30 (mobile 20).
   ========================================================================== */

.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-family: var(--font-sans);
}
/* Grupo sem caixa: mantém as mesmas colunas, sem incluir Perfil no tablist. */
.panel-tablist { display: contents; }
.nav-tabs .nav-item {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
.nav-tabs .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 58px;
    margin: 0;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: 0;
    background: var(--c-border-soft);
    color: var(--c-text);
    font-size: 20px;
    font-weight: var(--fw-medium);
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* hover da inativa: [NÃO DESENHADO] — proposta: escurece para o neutro de hover */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border: 0;
    background: var(--c-hover-neutral);
    color: var(--c-text);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active:hover {
    border: 0;
    background: var(--c-pink);
    color: var(--c-white);
}
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-item.show .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: var(--c-navy);
}
.nav-tabs .nav-link:focus-visible {
    outline: 3px solid var(--c-navy);
    outline-offset: -6px;
}
.nav-tabs .nav-link.active:focus-visible {
    outline-color: var(--c-white);
}
/* "Perfil" como dropdown-toggle: sem caret, igual às demais */
.nav-tabs .nav-link.dropdown-toggle::after {
    display: none;
}
.nav-tabs .nav-link.dropdown-toggle.active::after {
    display: block;
    margin: 0;
    border: 0;
}

/* painel de conteúdo */
.nav-tabs + .tab-content,
.tab-content--panel {
    padding: 30px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--c-surface-3);
    font-family: var(--font-sans);
}
.nav-tabs + .tab-content > .tab-pane {
    padding: 0;
}

/* ---- Pills (variante leve, não desenhada no XD [NÃO VERIFICADO]) ---------- */
.nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-sans);
}
.nav-pills .nav-link {
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius);
    background: var(--c-surface-1);
    color: var(--c-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    text-decoration: none;
}
.nav-pills .nav-link:hover { background: var(--c-hover-neutral); color: var(--c-text); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--c-pink);
    color: var(--c-white);
}
.nav-pills .nav-link:focus-visible {
    outline: 3px solid var(--c-pink-soft);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .nav-tabs {
        flex-direction: column;
        gap: var(--sp-2);            /* XD: gap 10 (8 na escala de 4) */
    }
    .nav-tabs--flush { gap: 0; }     /* Detalhes do Atendimento: pitch 58 */
    .nav-tabs + .tab-content,
    .tab-content--panel { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link { transition: none; }
}

/* ===== components/panel.css ===== */
/* ==========================================================================
   DS — PAINEL / ÁREA DO PARTICIPANTE / AUTH  (WF-11078)
   Spec C §1 (shell e cards), §1.3 (auth duplo), §1.4 (avisos), §5 (Painel),
   §5.6 (Cupom). Artboards XD: 04/05, 24/27, 31/38, 44/45, 49/50, 35/41, 08/09, 25/29, 36/43.
   Não define botões/campos/abas/tabela base (buttons.css, forms.css, tabs.css, table.css):
   só o shell (.page-shell/.page-card), wrappers e modificadores do painel.
   Desktop-first: regras base = desktop; @media (max-width:991.98px) = mobile 428.
   ========================================================================== */

:root {
    --panel-card-pad-x: 30px;
    --panel-card-pad-top: 70px;
}

/* ---- Shell da página (sobre body.page-bg-brand, definido em base.css) ---- */
.page-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px var(--page-pad-x-mobile) 60px;   /* 50 px abaixo do header (spec C §1.1) */
    min-height: 60vh;
}

/* ---- Card branco (r20) com modificadores de largura ---- */
.page-card {
    width: 100%;
    max-width: 565px;
    margin: 0 auto;
    padding: var(--panel-card-pad-top) var(--panel-card-pad-x) 60px;
    background: var(--c-white);
    border-radius: var(--radius-lg);
    color: var(--c-text-strong);
    font-family: var(--font-sans);
}
.page-card--xs   { max-width: 367px; }
.page-card--sm   { max-width: 565px; }
.page-card--md   { max-width: 623px; }
.page-card--auth { max-width: 960px; padding: 0; overflow: hidden; }
.page-card--lg   { max-width: var(--container-card); }
.page-card--compact { padding-top: 30px; }       /* H1 de 2 linhas: topo card+30 */
.page-card--content { padding-top: 30px; padding-bottom: 30px; }

.page-card__title {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
    text-transform: uppercase;
    text-align: center;
}
.page-card__title--h2 {      /* avisos: Bold 32/42 (mobile 22/32) */
    font-size: 32px;
    line-height: 42px;
}
.page-card__subtitle {       /* legenda 14/46 #424344 uppercase */
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-small);
    line-height: 46px;
    color: var(--c-text);
    text-transform: uppercase;
    text-align: center;
}
.page-card__body {
    max-width: 307px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--fs-small);
    line-height: 18px;
}
.page-card__body p { margin: 0 0 var(--sp-4); }
.page-card__body--lg { font-size: var(--fs-body); line-height: var(--lh-body); }
.page-card__body > :first-child strong,
.page-card__body .is-lead { font-weight: var(--fw-bold); }
.page-card__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    margin-top: var(--sp-6);
}
.page-card__actions .btn { width: 268px; max-width: 100%; }

/* ---- Auth duplo (Login 04/05, Esqueci 24/27) ---- */
.auth-card { display: flex; }
.auth-card__form {
    flex: 1 1 480px;
    padding: 50px 67px 50px;
    text-align: center;
}
.auth-card__aside {
    position: relative;
    flex: 0 0 480px;
    overflow: hidden;
    padding: 70px 59px;
    background: var(--c-navy) url("../images/ds/login-aside-pills.svg") center / cover no-repeat;   /* cápsulas do XD 04 */
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    color: var(--c-white);
    text-align: center;
}
.auth-card__aside > * { position: relative; z-index: 1; }
.auth-card__aside p:not(.auth-card__title) { margin: var(--sp-4) 0 var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-body); }
.auth-card__title {
    margin: 0 0 var(--sp-4);
    font-size: 32px; line-height: 42px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--c-navy);
}
.auth-card__aside .auth-card__title { color: var(--c-white); }
/* divisor "ACESSE SUA CONTA" — linhas 1px #424344 */
.auth-divider {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: var(--sp-3) auto var(--sp-5);
    max-width: 350px;
    font-size: var(--fs-small); line-height: 46px;
    color: var(--c-text); text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-text); }
.auth-card__form .form-group { max-width: 350px; margin-left: auto; margin-right: auto; margin-bottom: 36px; text-align: left; }
.auth-card__form .btn { width: 100%; max-width: 350px; }
.auth-card__link {
    display: inline-block; margin-top: var(--sp-5);
    font-size: var(--fs-small); line-height: 46px;
    color: var(--c-text-caption); text-decoration: none;
}
.auth-card__link:hover { color: var(--c-navy); text-decoration: underline; }
.auth-card__aside .btn { width: 268px; max-width: 100%; }
/* pílulas decorativas (canto sup.-dir. e inf.-esq., cortadas pela máscara) */
.auth-card__aside::before, .auth-card__aside::after {
    content: ""; position: absolute; z-index: 0;
    width: 260px; height: 150px;
    border: 3px solid var(--c-white);
    border-radius: 75px;
    background: var(--g-brand-vert);
}
.auth-card__aside::before, .auth-card__aside::after { content: none; }

/* ---- Aviso com caixa de regra de senha (44/45) ---- */
.pass-rule-box, .page-card .pass-rule {
    max-width: 307px; margin: 0 auto var(--sp-6);
    padding: 11px 14px;
    background: var(--c-surface-1);
    border: .25px solid var(--c-border-strong); border-radius: var(--radius-xs);
    font-size: 12px; line-height: 16px; color: var(--c-text-caption); text-align: center;
}

/* ---- Legado: views de senha/aviso (scene-form + card Bootstrap) → card do DS ---- */
.scene-form.senha .card,
.scene-form.page-sended-update-password .card,
.scene-form.page-changed-update-password .card {
    width: 100%; max-width: 367px;
    border: 0; border-radius: var(--radius-lg);
    background: var(--c-white);
    padding: 30px;
}
.scene-form.senha .card-header,
.scene-form.page-sended-update-password .card-header {
    background: transparent; border: 0; padding: 0 0 var(--sp-5);
    text-align: center; text-transform: uppercase;
    font-size: 32px; line-height: 42px; font-weight: var(--fw-bold); color: var(--c-navy);
}
.scene-form.senha .card-body, .scene-form.page-sended-update-password .card-body { padding: 0; }

/* ---- Painel: cabeçalho e ações (08/09) ---- */
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.panel-head .page-card__title { margin: 0; flex: 1; text-align: center; }
.panel-head__action { width: 268px; }
.panel-head--right { justify-content: flex-end; }
.panel-foot { margin-top: var(--sp-6); }
.panel-greeting { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-white); line-height: 18px; }

/* marca o card do painel: abas coladas ao conteúdo, sem padding lateral extra */
.page-card--panel .nav-tabs { margin-bottom: 0; border-bottom: 0; }
.page-card--panel .tab-content { margin-bottom: var(--sp-6); }

/* ---- Títulos de seção do painel (H4 + traço 3px) ---- */
.panel-title {
    position: relative; margin: 0 0 var(--sp-5); padding-bottom: var(--sp-3);
    font-size: 24px; line-height: 38px; font-weight: var(--fw-bold); color: var(--c-navy);
    text-align: left;
}
.panel-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 80px; height: 3px; background: var(--c-navy); }
.panel-text { margin: 0 0 var(--sp-6); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-strong); }
.panel-text--italic { font-style: italic; color: var(--c-text); }

/* Cartões legados (.card do Bootstrap) dentro das abas: sem moldura, o painel já é o fundo */
.panel-tab-content .card, .page-card--panel .tab-pane .card {
    background: transparent; border: 0; box-shadow: none;
}
.page-card--panel .tab-pane .card-body { padding: 0; }
.page-card--panel .tab-pane .special-title { display: none; }     /* substituído por .panel-title quando o markup migrar */

/* ---- Progresso da campanha (605×25, r14) ---- */
.page-card--panel .progress-container, .panel-progress {
    position: relative; height: 25px; border-radius: 14px;
    background: var(--c-text-caption); box-shadow: 0 6px 7.5px rgba(0, 0, 0, .15);
    overflow: hidden;
}
.page-card--panel .progress-container .progress-bar, .panel-progress__bar {
    background: var(--c-navy); border-radius: 14px;
}
.panel-progress { display: block; }
.panel-progress__bar { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: var(--sp-3); color: var(--c-white); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.page-card--panel .progress-text { z-index: 1; color: var(--c-white); font-size: var(--fs-small); line-height: 25px; }

/* ---- Chips de número da sorte (100×40, r3) ---- */
.lucky-chips, .boxNumber {
    display: grid; grid-template-columns: repeat(auto-fill, 100px);
    gap: 15px 17px; max-height: none;
}
.lucky-chip, .boxNumber .box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100px; height: 40px; min-width: 0; padding: 0;
    background: var(--c-border-soft); color: var(--c-text);
    border-radius: var(--radius-xs);
    font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold);
    text-decoration: none;
}
.boxNumber .box:hover { text-decoration: none; color: var(--c-text); }
.lucky-chip.is-new { background: var(--c-success); color: var(--c-navy); }     /* [NÃO DESENHADO] proposta */
.lucky-chip.is-winner { background: var(--c-pink); color: var(--c-white); }    /* [NÃO DESENHADO] proposta */
.boxNumber-container { max-height: none; overflow: visible; padding-right: 0; }

/* chips dentro da tabela (linhas inseridas por JS: span.badge.badge-primary) */
.panel-table .lucky-numbers .badge, #couponsTableBody .lucky-numbers .badge {
    display: inline-block; margin: 0 4px 4px 0; padding: 4px 8px;
    background: var(--c-border-soft); color: var(--c-text);
    border-radius: var(--radius-xs);
    font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 18px;
}

/* ---- Tabela de cupons / atendimentos (5.4) ---- */
.panel-table, #couponsTableContainer, .page-card--panel .table-responsive {
    background: var(--c-surface-1); border-radius: var(--radius); overflow-x: auto;
}
.panel-table table, #couponsTableContainer table, .page-card--panel .table-responsive table { min-width: 1039px; margin: 0; }
.panel-table thead th, #couponsTableContainer thead th, .page-card--panel .table-responsive thead th {
    height: 50px; padding: 16px 12px; vertical-align: middle;
    background: var(--c-navy); color: var(--c-white); border: 0;
    font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-bold);
}
.panel-table thead th:first-child, #couponsTableContainer thead th:first-child, .page-card--panel .table-responsive thead th:first-child { padding-left: 30px; border-radius: var(--radius) 0 0 0; }
.panel-table thead th:last-child, #couponsTableContainer thead th:last-child, .page-card--panel .table-responsive thead th:last-child { border-radius: 0 var(--radius) 0 0; }
.panel-table tbody tr, #couponsTableBody tr { background: var(--c-white); }
.panel-table tbody tr:nth-child(even), #couponsTableBody tr:nth-child(even) { background: var(--c-surface-1); }
.panel-table tbody th, .panel-table tbody td, #couponsTableBody th, #couponsTableBody td {
    height: 50px; padding: 16px 12px; vertical-align: middle; border: 0;
    font-size: var(--fs-body); line-height: 18px; font-weight: var(--fw-medium); color: var(--c-text-strong);
}
.panel-table tbody th:first-child, #couponsTableBody th:first-child { padding-left: 30px; }
.panel-table .coupon-obs, #couponsTableBody .coupon-obs { font-weight: var(--fw-semibold); text-decoration: underline; }
.panel-table .row-insert-date, .panel-table .row-purchase-date { color: var(--c-text); }
.panel-table a { color: var(--c-text-strong); font-weight: var(--fw-semibold); text-decoration: underline; }
.panel-table a:focus-visible, .panel-head a:focus-visible { outline: 2px solid var(--c-pink-soft); outline-offset: 2px; }

/* ---- Status: ponto r5 + halo r8 .5 ---- */
.status-dot, .stts {
    --dot: var(--c-success);
    position: relative; display: inline-flex; flex: none;
    width: 10px; height: 10px; margin: 0 8px; border-radius: 50%;
    background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 50%, transparent);
}
.stts { height: 10px; }                           /* sobrescreve o legado 13×33 */
.stts-green, .status-dot--new { --dot: var(--c-success); background: var(--dot); }
.stts-orange, .status-dot--progress { --dot: var(--c-warning); background: var(--dot); }
.stts-red, .status-dot--closed { --dot: var(--c-danger); background: var(--dot); }
.status-text { font-weight: var(--fw-medium); }
.status-text--new { color: var(--c-success); }
.status-text--progress { color: var(--c-warning); }
.status-text--closed { color: var(--c-danger); }
.td-stts { display: flex; align-items: center; gap: var(--sp-2); }

/* ---- Empty state [NÃO DESENHADO → proposta] ---- */
.panel-empty, #emptyCouponsMsg, #emptyLuckyNumbersMsg {
    padding: var(--sp-6) var(--sp-4); text-align: center;
    color: var(--c-text); font-size: var(--fs-body); line-height: var(--lh-body);
}
.panel-empty { border: 1px dashed var(--c-border-soft); border-radius: var(--radius); background: var(--c-white); }
.panel-empty .fa-solid { display: block; margin-bottom: var(--sp-3); font-size: 28px; color: var(--c-border-soft); }

/* ---- Perfil (texto itálico + rótulos) ---- */
.profile-list { margin: 0 0 var(--sp-6); font-style: italic; color: var(--c-text); font-size: var(--fs-body); line-height: var(--lh-body); }
.profile-list dt { display: inline; font-weight: var(--fw-regular); }
.profile-list dd { display: inline; margin: 0; }
.profile-list dd::after { content: ""; display: block; }

/* ---- Cadastro de Cupom (25/29) ---- */
.coupon-help { display: flex; justify-content: center; margin-bottom: var(--sp-6); }
.coupon-help .btn { max-width: 527px; width: 100%; }
.coupon-form .wrap-tax_coupon, .coupon-form .wrap-cnpj, .coupon-form .wrap-purchase_date, .coupon-form .wrap-cost { margin-bottom: 0; }
.coupon-form .row-input-cost { align-items: center; }
.scene-form .special-title.customTitle { text-align: center; }
#collapseNF { background: var(--c-surface-3); border: 1px solid var(--c-border-soft); border-radius: var(--radius); }
.coupon-confirm-list { margin: 0 0 var(--sp-5); padding: 0; list-style: none; font-style: italic; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
.coupon-confirm-question { margin: 0 0 var(--sp-4); font-size: var(--fs-h3); line-height: 28px; font-weight: var(--fw-bold); color: var(--c-text); }

/* Legado da tela de cupom: .scene-form > .container > .card vira page-card--md */
.scene-form .container > .card.mt-4 { width: 100%; max-width: 623px; border: 0; border-radius: var(--radius-lg); background: var(--c-white); }
.scene-form .container > .card.mt-4 .card-body { padding: 30px; }

/* ---- Autenticação / cadastro longo: cartão largo ---- */
.page-card--lg .form-actions { justify-content: center; }

/* ---- Mobile (428) ---- */
@media (max-width: 991.98px) {
    :root { --panel-card-pad-x: 20px; --panel-card-pad-top: 30px; }
    .page-shell { padding: 50px 40px 40px; }
    .page-card { max-width: 347px; padding-bottom: 40px; }
    .page-card--auth { max-width: 347px; }
    .page-card__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
    .page-card__title--h2 { font-size: 22px; line-height: 32px; }
    .page-card--compact { padding-top: 30px; }
    .auth-card { flex-direction: column; }
    .auth-card__form { flex: none; padding: 40px 20px; }
    .auth-card__form .form-group { max-width: 307px; margin-bottom: 26px; }
    .auth-card__aside { flex: none; padding: 50px 30px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
    .auth-card__title { font-size: 22px; line-height: 32px; }
    .auth-card__form .auth-card__title { font-size: 22px; line-height: 42px; }
    .auth-card__aside p { max-width: 283px; margin-left: auto; margin-right: auto; }
    .auth-page .auth-card__aside p.font-weight-light:not(.auth-card__title) { font-weight: var(--fw-regular) !important; }
    .panel-head { flex-direction: column; }
    .panel-head__action, .panel-head .btn { width: 268px; max-width: 100%; }
    .panel-foot { display: flex; justify-content: center; }
    .panel-title { font-size: 18px; line-height: 28px; }
    .lucky-chips, .boxNumber { grid-template-columns: repeat(3, 80px); gap: 20px 10px; justify-content: center; }
    .lucky-chip, .boxNumber .box { width: 80px; }
    .page-card--panel .progress-container, .panel-progress { max-width: 267px; }
    .scene-form .container > .card.mt-4 { max-width: 347px; }
    .scene-form .container > .card.mt-4 .card-body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-card *, .auth-card * { transition: none; animation: none; }
}

/* Real participant templates: keep Bootstrap/JS hooks, compose DS surfaces. */
.page-bg-brand.page-shell { background: var(--g-brand-diag); }
.participant-page > .page-card,
.coupon-page > .page-card,
.participant-aux.page-shell > .page-card { padding-top: var(--panel-card-pad-x); }
.participant-page .text-black { color: var(--c-text-strong); }
.participant-page .panel-head { margin-bottom: var(--sp-6); }
.participant-page .nav-tabs .nav-link { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.participant-page .dropdown-menu { min-width: 100%; border: 1px solid var(--c-border-soft); border-radius: var(--radius); background: var(--c-white); }
.participant-page .dropdown-item { padding: var(--sp-3) var(--sp-4); color: var(--c-navy); white-space: normal; }
.participant-page .dropdown-item:hover,
.participant-page .dropdown-item:focus { background: var(--c-surface-1); }
.participant-page .dropdown-item:focus-visible { outline: var(--base-focus-ring); outline-offset: -2px; }
.legacy-panel .card { border: 0; background: transparent; box-shadow: none; }
.legacy-panel .card-body { padding: 0; }
.legacy-panel .boxInfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.legacy-panel .boxButtons { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.coupon-form .wrap-tax_coupon,
.coupon-form .wrap-cnpj { flex-basis: 100%; max-width: 100%; }
.coupon-form .form-group { margin-bottom: var(--form-gap); }
.coupon-form .form-group:has(.form-control) > label:not(.labelfocus):not(.custom-file-label),
.coupon-form .form-group > .input:has(.form-control) > label {
    position: absolute; z-index: 2; left: var(--sp-3); top: calc(-1 * var(--sp-4));
    margin: 0; padding: 0 var(--sp-2);
    color: var(--c-navy); background: var(--c-white);
    font-size: var(--form-fs-label); line-height: var(--lh-body); font-weight: var(--fw-regular);
}
.coupon-form label:has(> input[type="radio"]),
.coupon-form label:has(> input[type="checkbox"]) {
    display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--base-touch-target); cursor: pointer;
}
.coupon-form label > input[type="radio"],
.coupon-form label > input[type="checkbox"] {
    position: static; flex: none; margin: 0;
}
.coupon-form label:has(> input:focus-visible) {
    outline: var(--base-focus-ring); outline-offset: var(--base-focus-offset);
}
.coupon-form .form-actions { margin-top: var(--sp-5); }
.coupon-form #btn-cadastrar { --btn-bg: var(--c-navy); --btn-bg-h: var(--c-text); --btn-fg: var(--c-white); }
.coupon-page #collapseNF { width: 100%; padding: var(--sp-4); margin: 0 0 var(--sp-5); }
.participant-page #register-coupon .coupon-page { padding: 0; min-height: 0; background: transparent; }
.participant-page #register-coupon .coupon-form { padding: var(--sp-5); }
.coupon-loading {
    position: fixed; inset: 0; z-index: var(--z-toast);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-4); padding: var(--sp-4);
    background: color-mix(in srgb, var(--c-navy) 80%, transparent);
    color: var(--c-white); font-size: var(--fs-lead); font-weight: var(--fw-semibold); text-align: center;
}
.coupon-loading[hidden] { display: none; }
#exampleModalCenter .modal-body > .container { padding: 0; }
#exampleModalCenter .coupon-confirm-question { text-align: left; }
#exampleModalCenter .form-group { margin-bottom: var(--sp-5); }
#exampleModalCenter .form-control[readonly] { background: var(--c-surface-3); color: var(--c-text); }
#exampleModalCenter .coupon-confirm-fields { display: none; }   /* inputs readonly seguem no DOM: cupons-add.js (core) os preenche */
#exampleModalCenter .coupon-confirm-list { margin-left: 0; padding-left: 0; }
#exampleModalCenter .coupon-confirm-question { padding-left: 15px; }   /* a .row do Bootstrap puxa -15px (col-xs-12 não existe no BS4) */
.table-scroll { max-width: 100%; overflow-x: auto; }   /* tabela do resumo do sorteio: rola dentro do card em vez de estourar */
.participant-aux img { max-width: 100%; height: auto; }
.participant-aux .grid-brincadeiras,
.participant-aux .row-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.participant-aux .acoes { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.docs-send .file-drop-zone { min-height: calc(var(--form-h) * 3); height: auto; }
.docs-send .progress-loader { width: 100%; max-width: var(--container-card); margin: var(--sp-5) auto 0; color: var(--c-white); }
/* The existing AJAX success feedback remains a toast/Flash (Q5), not a new route. */
body:has(.participant-page) #toast-container .toast { max-width: 100%; box-shadow: none !important; /* vence .shadow-lg do Bootstrap (!important) */ }
body:has(.participant-page) #toast-container .toast-body.bg-success {
    background: var(--c-success-bg) !important; color: var(--c-game-green-dark) !important; /* vencem .bg-success/.text-white do Bootstrap (!important) */
    border: 1px solid var(--c-game-green-dark); font-size: var(--fs-body) !important; /* vence font-size inline de showToast */
}
body:has(.participant-page) #toast-container .toast-body .close { color: inherit !important; } /* vence .text-white do Bootstrap */
@media (max-width: 991.98px) {
    .participant-page .nav-tabs .dropdown-menu { position: static !important; transform: none !important; width: 100%; } /* vencem o style inline do Popper (position/transform) */
    .participant-page .panel-tab-content .boxNumber { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .participant-page .panel-tab-content .boxNumber .box { width: 100%; min-width: 0; }
    .legacy-panel .boxInfo,
    .participant-aux .grid-brincadeiras,
    .participant-aux .row-videos { grid-template-columns: minmax(0, 1fr); }
    .participant-aux .input-group { flex-wrap: wrap; gap: var(--sp-2); }
    .participant-aux .input-group > .form-control { flex-basis: 100%; width: 100%; border-radius: var(--radius); }
    .participant-page #register-coupon .coupon-form { padding: 0; }
    .coupon-form .labelfocus { white-space: normal; }
    body:has(.participant-page) #toast-container { left: var(--sp-4); right: var(--sp-4) !important; } /* vence o right inline/do plugin de toast */
    body:has(.participant-page) #toast-container .toast { min-width: 0 !important; width: 100%; } /* vence minWidth inline de showToast */
}
.coupon-flash { margin: 0; padding: 0; }
.coupon-flash #msg-erro { margin: 0; }
.legacy-panel [data-profile-field="Telefone"]:has(i) { display: none; } /* Q7: no invented landline. */
.coupon-form .btn.btn-secondary { color: var(--btn-fg) !important; background: var(--btn-bg); } /* color vence global.css .btn-secondary{color:#fff !important} */
.coupon-help .btn { display: block; align-content: center; white-space: normal; font-size: var(--fs-small); line-height: var(--lh-small); }
.coupon-form #btn-cadastrar { background: var(--btn-bg); color: var(--btn-fg); }
.coupon-form .btn.btn-secondary:hover,
.coupon-form .btn.btn-secondary:focus,
.coupon-form #btn-cadastrar:hover,
.coupon-form #btn-cadastrar:focus { background: var(--btn-bg-h); }
.coupon-form #btn-cadastrar:disabled,
.coupon-form #btn-cadastrar.disabled,
.coupon-form #btn-cadastrar[aria-disabled="true"] { --btn-bg: var(--c-border-soft); --btn-bg-h: var(--c-border-soft); --btn-fg: var(--c-text-muted); }
/* Match XD 25/29 without removing the configured coupon questions. */
.coupon-form .form-actions > .btn { min-width: 0; width: auto; flex: 1 1 0; }
@media (max-width: 991.98px) {
    .coupon-form .page-card__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
    .coupon-form .form-actions > .btn { flex: none; width: var(--btn-w); }
}

/* Justificativa é texto informativo, não status: vence o vermelho claro legado. */
.participant-page td.text-danger { color: var(--c-text) !important; } /* vence .text-danger do Bootstrap (!important) */

/* Referral actions compose the DS row without the legacy form-group width. */
.referral-actions { gap: var(--sp-5); }
.referral-actions > .btn { width: var(--btn-w); }
@media (max-width: 991.98px) {
    .referral-actions > .btn { min-width: 0; width: 100%; }
}

/* Coupon support shares one column rhythm; multiline copy never changes its size. */
.coupon-help-actions {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr; gap: var(--sp-3);
    margin: 0 0 var(--sp-6);
}
.coupon-help-actions > .btn {
    width: 100%; min-width: 0; height: 100%;
    min-height: var(--btn-h); padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small); line-height: var(--lh-small);
}
.coupon-form .wrap-quiz { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.coupon-form .wrap-quiz-questionb { margin: 0; }
.coupon-form .wrap-quiz-questionb > .col { padding: 0; min-width: 0; }
.coupon-form .wrap-answers { margin: 0; }
.coupon-form .wrap-answers > [class*="col-"] { padding: 0; }
.coupon-form .wrap-answers .form-group,
.coupon-form .wrap-answers .form-check { margin: 0; padding: 0; }
.coupon-form .wrap-answers .custom-control { min-height: var(--base-touch-target); margin: 0; padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.coupon-form .wrap-answers textarea.form-control { min-height: var(--sp-10); height: var(--sp-10); padding: var(--sp-3) var(--form-pad-x); }
/* Multi-question surveys use the same left-aligned column as coupon fields.
   Single-question prize quizzes retain their existing game styling. */
#quiz .quiz-survey #form-participate { width: 100%; min-width: 0; }
#quiz .quiz-survey > .row { margin: 0; }
#quiz .quiz-survey .box-quiz { margin-bottom: var(--sp-5); }
#quiz .quiz-survey .box-quiz-question { padding: 0; }
#quiz .quiz-survey .box-quiz-question .special-title,
#quiz .quiz-survey .titleQuestion {
    max-width: none; margin: 0 0 var(--sp-2); text-align: left;
    font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-navy);
}
#quiz .quiz-survey .titleQuestion { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--c-text); }
#quiz .quiz-survey .titleQuestion:empty { display: none; }
#quiz .quiz-survey .item {
    max-width: none; min-height: var(--base-touch-target); margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular);
}
#quiz .quiz-survey .input-text .form-control { width: 100%; }

/* Quiz com várias perguntas (ex.: id 13): respiro entre a última pergunta e o botão Confirmar. O quiz de 1 pergunta (id 14) não usa .quiz-survey. */
.game-card.quiz-survey .skew { margin-top: var(--sp-5); }

/* O sistema pinta todo elemento de preto (`* {color:#000}`): o <span> interno do botão deve herdar a cor do botão (branco no primário). */
.coupon-help-actions > .btn:not(.btn-secondary) span { color: inherit; }

/* ===== components/tickets.css ===== */
/* DS — Atendimento. D1: markup front-only aplicado nas três views do sistema.
   Q4: sem upload nem aba de acompanhamento sem contrato; respostas existentes preservadas.
   Medidas específicas do XD declaradas como tokens locais; demais valores reutilizam o DS. */
.tickets-page {
    --ticket-card-w: 623px;
    --ticket-textarea-h: 130px;
    --ticket-table-w: 1039px;
    --ticket-row-h: 50px;
    --ticket-dot-size: 10px;
    --ticket-dot-halo: 3px;
    --ticket-shell-top: 50px;
    --ticket-shell-bottom: 60px;
    --ticket-mobile-pad: 20px;
    max-width: none;
    margin: 0;
    padding: var(--ticket-shell-top) var(--page-pad-x-mobile) var(--ticket-shell-bottom);
    background: var(--g-brand-diag);
    font-family: var(--font-sans);
    min-height: 60vh;
}
.tickets-page > .row { max-width: var(--container-card); margin-inline: auto; }
.tickets-page > .row > .col-md-12 { padding: 0; min-width: 0; }
.tickets-page > .row > .col-md-12 > .card {
    background: var(--c-white); border: 0; border-radius: var(--radius-lg);
    padding: var(--panel-card-pad-top) var(--panel-card-pad-x) var(--ticket-shell-bottom);
    box-shadow: none;
}
.tickets-page--narrow > .row { max-width: var(--ticket-card-w); }
.tickets-page .tickets-flash:has(#msg-erro:only-child:empty) { display: none; }
.tickets-page .card-header {
    display: flex; flex-direction: column; gap: var(--sp-6);
    background: transparent; border: 0; padding: 0 0 var(--sp-8);
}
.tickets-page .card-title {
    margin: 0 !important; /* vence .mb-4 do Bootstrap (!important), preservado no markup */
    font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold);
    color: var(--c-navy); text-transform: uppercase; text-align: center;
}
.tickets-page .ticket-heading-detail { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.tickets-page .fa { display: none; } /* FA4 legado não existe no FA6 slim. Texto permanece. */
.tickets-page .card-body { padding: 0; }
.tickets-page .card-header > div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.tickets-page .ticket-field { position: relative; margin-bottom: var(--form-gap); }
.tickets-page .ticket-field > label {
    position: absolute; top: 0; left: var(--sp-5); transform: translateY(-50%);
    padding-inline: var(--sp-2); margin: 0; background: var(--c-white);
    font-size: var(--form-fs-label); line-height: var(--lh-small); font-weight: var(--fw-regular);
    color: var(--c-navy);
}
.tickets-page textarea.form-control { height: var(--ticket-textarea-h); }
.tickets-page .ticket-actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-5); }
.tickets-page .ticket-actions .btn { min-width: 0; width: var(--btn-w); max-width: 100%; }
.tickets-page .ticket-actions > .btn-primary,
.tickets-page .quick-reply .btn-primary { background: var(--c-navy); border-color: var(--c-navy); }
.tickets-page .ticket-actions > .btn-primary:hover,
.tickets-page .quick-reply .btn-primary:hover { background: var(--c-navy-hover); border-color: var(--c-navy-hover); }
.tickets-page .btn-secondary { background: var(--c-surface-1); color: var(--c-text) !important; /* vence global.css .btn-secondary color:white !important */ }
.tickets-page .btn-secondary:hover { background: var(--c-hover-neutral); }
.tickets-page .ticket-detail-panel { padding: var(--sp-6); background: var(--c-surface-3); border-radius: var(--radius-lg); }
.tickets-page .ticket-main h5 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-text); }
.tickets-page .ticket-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.tickets-page .badge {
    display: inline-flex; align-items: center; padding: 0; background: transparent;
    border-radius: 0; font-size: var(--fs-body); line-height: var(--lh-body);
    font-weight: var(--fw-medium); color: var(--c-text);
}
.tickets-page .badge-primary { --dot: var(--c-success); }
.tickets-page .badge-warning, .tickets-page .badge-info { --dot: var(--c-warning); }
.tickets-page .badge-success, .tickets-page .badge-secondary { --dot: var(--c-danger); }
.tickets-page .status-novo { --dot: var(--c-success); }
.tickets-page .status-andamento, .tickets-page .status-aguardando { --dot: var(--c-warning); }
.tickets-page .status-fechado { --dot: var(--c-danger); }
.tickets-page .badge::before {
    content: ''; width: var(--ticket-dot-size); height: var(--ticket-dot-size); flex: none;
    margin-inline: var(--sp-1) var(--sp-4); border-radius: var(--radius-pill);
    background: var(--dot, var(--c-border-soft));
    box-shadow: 0 0 0 var(--ticket-dot-halo) color-mix(in srgb, var(--dot, var(--c-border-soft)) 50%, transparent);
}
.tickets-page .ticket-meta .badge:first-child::before,
.tickets-page .ticket-meta .badge-info::before,
.tickets-page td:nth-child(5) .badge::before { display: none; }
.tickets-page .ticket-content .card, .tickets-page .reply-item .card,
.tickets-page .parent-ticket-info .card { border: 0; background: transparent; }
.tickets-page .ticket-content .card-body { font-weight: var(--fw-light); }
.tickets-page .ticket-content, .tickets-page .reply-item { overflow-wrap: anywhere; }
.tickets-page .ticket-content img { max-width: 100%; height: auto; }
.tickets-page .ticket-replies { margin-top: var(--sp-6); }
.tickets-page .reply-item { padding-block: var(--sp-4); border-bottom: 1px solid var(--c-border-soft); }
.tickets-page .reply-item .card-header { align-items: flex-start; padding-bottom: var(--sp-2); gap: var(--sp-2); }
.tickets-page .reply-item .card-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); }
.tickets-page .quick-reply { border-top: 1px solid var(--c-border-soft); padding-top: var(--sp-6); }
.tickets-page .quick-reply .form-group { margin-bottom: var(--sp-5); }
.tickets-page .quick-reply h6, .tickets-page .ticket-replies h6 { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.tickets-page .ticket-filters > .row { align-items: flex-end; row-gap: var(--sp-4); }
.tickets-page .ticket-filters .btn { min-width: 0; max-width: 100%; }
.tickets-page .ticket-table-scroll { overflow-x: auto; border-radius: var(--radius); }
.tickets-page .table { min-width: var(--ticket-table-w); margin-bottom: 0; background: var(--c-surface-1); }
.tickets-page .table thead th { height: var(--ticket-row-h); background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-bold); }
.tickets-page .table td, .tickets-page .table th { height: var(--ticket-row-h); vertical-align: middle; border: 0; font-size: var(--fs-body); padding-inline: var(--sp-4); }
.tickets-page .table-striped tbody tr:nth-of-type(odd) { background: var(--c-white); }
.tickets-page .table-striped tbody tr:nth-of-type(even) { background: var(--c-surface-1); }
.tickets-page .table .btn-sm { min-width: 0; padding-inline: var(--sp-3); }
.tickets-page .table th.sortable { cursor: pointer; }
.tickets-page .sort-icon { margin-left: var(--sp-2); }
.tickets-page .alert-info { background: var(--c-surface-1); border: 0; color: var(--c-text); }
.tickets-page .message.success, .tickets-page .alert-success {
    max-width: var(--ticket-card-w); margin: 0 auto var(--sp-5); padding: var(--sp-5);
    border-radius: var(--radius-sm); font-size: var(--fs-lead); line-height: var(--lh-lead);
}
.tickets-page .pagination .page-link { color: var(--c-navy); }
.tickets-page .pagination .active .page-link { background: var(--c-pink); border-color: var(--c-pink); color: var(--c-white); }
@media (max-width: 991.98px) {
    .tickets-page > .row > .col-md-12 > .card { padding: var(--sp-6) var(--ticket-mobile-pad) var(--sp-7); }
    .tickets-page .card-title { overflow-wrap: anywhere; }
    .tickets-page .card-header > div { flex-direction: column; width: 100%; }
    .tickets-page .card-header .btn { min-width: 0; width: 100%; }
    .tickets-page .ticket-actions { flex-direction: column-reverse; gap: var(--sp-5); }
    .tickets-page .ticket-actions > div { width: 100%; text-align: center; }
    .tickets-page .ticket-detail-panel { padding: var(--sp-5); background: var(--c-surface-1); }
    .tickets-page .quick-reply .btn { min-width: 0; width: 100%; }
    .tickets-page .ticket-filters > .row > [class*='col-'] { flex: 0 0 100%; max-width: 100%; text-align: left !important; /* vence .text-right do Bootstrap (!important) */ }
    .tickets-page .ticket-filters label:has(+ br), .tickets-page .ticket-filters br { display: none; }
    .tickets-page .ticket-filters .btn { width: 100%; }
}

/* Original core views emit their style blocks after the head stylesheets.
   This adapter-only scope has greater specificity; the static mock is unchanged. */
main > .tickets-page .ticket-form .form-control:focus {
    border-color: var(--c-navy); box-shadow: none;
}
main > .tickets-page .parent-ticket-info .card,
main > .tickets-page .ticket-content .card { border-left: 0; }
main > .tickets-page .ticket-meta .badge { font-size: var(--fs-body); }
main > .tickets-page .reply-item {
    margin-left: 0; border-left: 0; padding-left: 0;
}
main > .tickets-page .quick-reply {
    border-top-color: var(--c-border-soft); padding-top: var(--sp-6);
}
main > .tickets-page .badge:is(.status-novo, .status-andamento, .status-aguardando, .status-fechado, .badge-info) {
    background: transparent; color: var(--c-text);
}
main > .tickets-page .alert-info { border-left: 0; }
main > .tickets-page .table th.sortable {
    user-select: auto; transition: none;
}
main > .tickets-page .table th.sortable:hover { background: var(--c-navy); }
main > .tickets-page .table th .sort-icon {
    font-size: inherit; margin-left: var(--sp-2); color: inherit;
}
main > .tickets-page .table-hover tbody tr:hover { background: var(--c-surface-1); }

/* ===== components/games.css ===== */
/* Cores decorativas dos jogos (arte do XD sem token global): roleta/raspadinha/quiz */
:root {
    --game-gold: #fda800;          /* aro/seta/bolinha da roleta e moldura da raspadinha */
    --game-gold-light: #ffd45a;    /* brilho da placa dourada */
    --game-plate-ink: #310001;     /* texto da placa do prêmio */
    --game-scratch-label: #606060; /* rótulo da raspadinha */
    --game-quiz-text: #45494c;     /* texto da opção do quiz */
}
/* Fundo neutro do jogo (gradiente da marca); .game-page--won/--lost abaixo sobrescrevem */
.game-page { background: var(--g-brand-diag); }
/* ==========================================================================
   DS — JOGOS / PRÊMIO INSTANTÂNEO / QUIZ  (WF-11078)
   Spec C §7 (7.1 card, 7.2 roleta, 7.3 raspadinha, 7.4 quiz), §3.1 Alerta de Sucesso.
   Artboards XD: 58/70 roleta · 60/61 ganhou · 64/65 não ganhou · 69/82 raspadinha ·
   73/77 · 71/74 · 80/91 quiz · 84/88 ganhou · 81/85 não ganhou.
   Mantém os hooks do JS/markup atual: #wheel, .wheel-container,
   #spinButton, #winningIndex, #instrucoes, #btnContinuar, #perdeu/#ganhou.scratchpad,
   section#quiz, .box-quiz, .box-quiz-answers, label.item(.selected), .titleAnswer, #btnEnviar, #loading.
   Todo o escopo é `.game-card` (especificidade > roleta.css/raspadinha.css legados, que passam a ser dispensáveis).
   Estados (contrato em docs/ds/mock-estados-jogos-quiz.md): .game-page--won / --lost no wrapper;
   .is-won/.is-lost no card; .quiz-option.is-selected/.is-correct/.is-wrong.
   ========================================================================== */

/* ---- Página: fundos por estado ---- */
.game-page { padding-top: 50px; padding-bottom: 60px; }
.game-page--won {
    background: var(--c-game-win) url("../images/ds/game-confetti.webp") center top / 100% auto no-repeat;
    background: var(--c-game-win) image-set(url("../images/ds/game-confetti.avif") type("image/avif"), url("../images/ds/game-confetti.webp") type("image/webp")) center top / 100% auto no-repeat;
}
.game-page--lost {
    background: url("../images/ds/game-emojis.webp") center top / cover no-repeat, var(--g-brand-diag);
    background: image-set(url("../images/ds/game-emojis.avif") type("image/avif"), url("../images/ds/game-emojis.webp") type("image/webp")) center top / cover no-repeat, var(--g-brand-diag);
}

/* ---- Card do jogo (565 / mobile 349) ---- */
.game-card {
    --game-plaque-fill: linear-gradient(180deg, var(--game-gold-light), var(--c-offwhite), var(--game-gold-light));
    width: 100%; max-width: 565px; margin: 0 auto;
    padding: 30px 30px 50px;
    background: var(--c-white); border-radius: var(--radius-lg);
    text-align: center; font-family: var(--font-sans); color: var(--c-text);
}
.game-card__title {
    margin: 0 0 var(--sp-5); font-size: var(--fs-h1); line-height: var(--lh-h1);
    font-weight: var(--fw-bold); color: var(--c-navy); text-transform: uppercase;
}
.game-card__subtitle {
    max-width: 469px; margin: 0 auto var(--sp-5);
    font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--c-text);
}
.game-card__subtitle em, .game-card__name { font-style: normal; font-weight: inherit; color: var(--c-brand-a); }   /* [NomeParticipante] */
.game-card.is-won .game-card__subtitle { color: var(--c-brand-a); }
.game-card__actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.game-card__actions .btn { width: 250px; min-width: 0; max-width: 100%; }
.game-card.is-won .game-card__actions .btn, .game-card__actions--wide .btn { width: 268px; }
.game-card .d-none { display: none; }    /* hooks JS (remove d-none ao fim do giro/raspagem) */

/* ---- Alerta de Sucesso (350×115) — substitui .alert.alert-warning#instrucoes ---- */
.game-alert, .game-card #instrucoes.alert {
    max-width: 350px; margin: var(--sp-5) auto 0; padding: 28px;
    background: var(--c-success-bg); border: .5px solid var(--c-success-border); border-radius: 5px;
    box-shadow: 0 3px 7.5px rgba(68, 68, 68, .06);
    color: var(--c-game-green-dark); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-bold); text-align: center;
}
.game-card #instrucoes.alert.d-none, .game-card #instrucoes.d-none { display: none; }
.game-alert b, .game-alert strong { font-weight: var(--fw-bold); }
.game-card #instrucoes:not(.alert) { margin-top: var(--sp-4); color: var(--c-text); font-size: var(--fs-h3); font-weight: var(--fw-bold); }

/* ---- Roleta: três camadas SVG do XD, somente #wheel gira (354 / 349) ---- */
.game-card .wheel-container {
    position: relative; width: min(100%, 354px); aspect-ratio: 1; height: auto;
    margin: 0 auto var(--sp-5);
}
.game-card #wheel,
.game-card .wheel-pointer,
.game-card .wheel-hub {
    display: block; width: 100%; height: 100%;
}
.game-card #wheel { transform-origin: center; }
.game-card--roleta .wheel-container { overflow: clip; }
.game-card .wheel-pointer,
.game-card .wheel-hub {
    position: absolute; inset: 0; pointer-events: none;
}
/* #spinButton legado era pílula com id: herda .btn--dark do DS */
.game-card #spinButton {
    width: 250px; min-width: 0; max-width: 100%; height: 52px; margin: 0 auto; padding: 0;
    background: var(--c-navy); color: var(--c-white); border: 0; border-radius: var(--radius);
    font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-semibold);
    box-shadow: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color var(--t) var(--ease);
}
.game-card #spinButton:hover { background: var(--btn-bg-h); }
.game-card #spinButton:focus-visible { outline: 3px solid var(--c-pink-soft); outline-offset: 3px; }
.game-card #spinButton:disabled { cursor: not-allowed; background: var(--c-navy); opacity: .65; }

/* Resultado real da roleta: nome/prêmio do servidor, sem duplicar a mensagem de derrota. */
.game-card--roleta .game-card__result { display: none; }
.game-card--roleta:is(.is-won, .is-lost) .game-card__subtitle:not(.game-card__result) { display: none; }
.game-card--roleta:is(.is-won, .is-lost) .game-card__result { display: block; color: var(--c-text); }
.game-card--roleta.is-lost #instrucoes { display: none; }
.game-card--roleta #instrucoes { overflow-wrap: anywhere; }
.game-card--roleta .game-card__actions .form-group { margin-bottom: 0; }
.game-card--roleta #btnContinuar { background: transparent; height: auto; border: 0; }
/* fatias do mock estático (sem canvas): conic-gradient 12 fatias #165d59/#eeeeee */
.game-wheel-mock {
    width: 100%; height: 100%; border: var(--sp-2) solid var(--game-gold); border-radius: 50%; box-sizing: border-box;
    background: repeating-conic-gradient(var(--c-game-green) 0 15deg, var(--c-surface-1) 15deg 30deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

/* ---- Raspadinha: área 309×108 (não-responsiva por spec; aspect-ratio como proposta) ---- */
.game-card .scratchpad {
    position: relative; width: min(100%, 309px); aspect-ratio: 309 / 108; height: auto;
    margin: var(--sp-5) auto; padding: 0; overflow: hidden;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
}
.game-card .scratchpad canvas, .game-card .scratchpad img:not(.scratch-plate) { position: absolute; inset: 0; width: 100%; height: 100%; }
.scratch-cover {       /* rótulo sobre a capa prateada (mock) */
    font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--game-scratch-label); text-transform: uppercase;
    background: var(--game-plaque-fill) padding-box, url("../images/ds/game-scratch-cover.webp") center / 100% 100% no-repeat border-box;
    background: var(--game-plaque-fill) padding-box, image-set(url("../images/ds/game-scratch-cover.avif") type("image/avif"), url("../images/ds/game-scratch-cover.webp") type("image/webp")) center / 100% 100% no-repeat border-box;
    border: var(--sp-1) solid var(--game-gold); border-radius: var(--radius-sm); width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
/* Assets XD incluem lettering, moldura e sombra: removida a placa CSS (gradiente,
   borda dourada, Courier e imagens de sombra), para não duplicar a arte exportada. */
.scratch-plate {
    display: block; width: 370px; max-width: 100%; height: auto;
    margin: var(--sp-5) auto; border: 0; box-shadow: none; filter: none;
}

/* Canvas must remain visible: the legacy site hides every canvas by default. */
.game-page:has(.game-card--scratch) > .container-fluid,
.game-card--scratch > .col-12 { padding-inline: 0; }
.game-card--scratch .scratchpad canvas { display: block; z-index: 1; }
.game-card--scratch .scratchpad img:not(.scratch-plate) { visibility: hidden; }
/* A placa de resultado fica sob o canvas: a área raspada revela a placa (antes ficava display:none e aparecia o card branco). */
.game-card--scratch .scratchpad .scratch-plate {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover;
}
.game-card--scratch:is(.is-won, .is-lost) .scratchpad {
    width: min(100%, 370px); max-width: 100%; aspect-ratio: auto;
}
.game-card--scratch:is(.is-won, .is-lost) .scratchpad .scratch-plate {
    position: static; width: 100%; height: auto; object-fit: initial;
}
.game-card--scratch:is(.is-won, .is-lost) .scratchpad canvas { display: none; }
.game-card--scratch .game-card__result { display: none; }
.game-card--scratch:is(.is-won, .is-lost) .game-card__subtitle:not(.game-card__result) { display: none; }
.game-card--scratch:is(.is-won, .is-lost) .game-card__result { display: block; color: var(--c-text); }
.game-card--scratch #btnContinuar { background: transparent; border: 0; height: auto; width: auto; margin: 0; }
.game-card--scratch .game-card__actions:not(:has(.btn:not(.d-none))) { display: none; }
.game-card--scratch #instrucoes { overflow-wrap: anywhere; }
.game-card--scratch .form-group { margin-bottom: 0; }

/* ---- Quiz ---- */
:root {
    --quiz-option-width: 367px;
    --quiz-option-width-mobile: 307px;
    --quiz-option-height: 50px;
    --quiz-option-gap: 20px;
    --quiz-option-border: var(--c-border-strong);
    --quiz-option-text: var(--game-quiz-text);
    --quiz-page-top: 50px;
}
#quiz.game-page, .quiz.game-page { height: auto; min-height: 0; padding-top: var(--quiz-page-top); }
#quiz .game-card .box-quiz { margin: 0; }
.quiz-question, #quiz .game-card .titleQuestion, #quiz .game-card .box-quiz-question .special-title {
    max-width: 469px; margin: 0 auto var(--sp-5);
    font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold);
    color: var(--c-brand-a); text-align: center; text-transform: none;
}
#quiz .game-card .special-title::after { display: none; }
.game-card .box-quiz-answers {
    max-width: none; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
}
.game-card .box-quiz-answers.error { outline: 1px solid var(--c-pink); outline-offset: var(--sp-2); border-radius: var(--radius-sm); }
.game-card .validation-message { margin: var(--sp-3) 0 var(--sp-5); color: var(--c-pink); font-size: var(--fs-small); }
.game-card .box-quiz-answers .row { margin: 0; display: block; }
.game-card .box-quiz-answers [class*="col-"] { padding: 0; max-width: none; flex: none; }

.quiz-option, #quiz .game-card .item {
    position: relative; display: flex; align-items: center; justify-content: flex-start;
    width: 100%; max-width: var(--quiz-option-width); min-height: var(--quiz-option-height);
    margin: 0 auto var(--quiz-option-gap); padding: var(--sp-2) var(--quiz-option-gap);
    background: var(--c-white); border: 1px solid var(--quiz-option-border); border-radius: var(--radius-sm);
    color: var(--quiz-option-text); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-bold); text-align: left;
    cursor: pointer; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.quiz-option .titleAnswer, #quiz .game-card .item .titleAnswer, #quiz .game-card .item .checkmark {
    margin: 0; padding: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; text-align: inherit;
}
#quiz .game-card .item .checkmark::before, #quiz .game-card .item .checkmark::after { display: none; }
#quiz .game-card .item .answer_image img { max-height: calc(var(--sp-7) * 4); border-radius: var(--radius-xs); }
#quiz .game-card .item input[type="radio"], #quiz .game-card .item input[type="checkbox"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none;
}
.quiz-option:hover, #quiz .game-card .item:hover { background: var(--c-surface-1); border-color: var(--c-navy); transform: none; }
.quiz-option:focus-within, #quiz .game-card .item:focus-within { outline: var(--base-focus-ring); outline-offset: var(--sp-1); }
/* selecionada (XD 81/84): gradiente da marca + texto branco */
.quiz-option.is-selected, #quiz .game-card .item.selected, #quiz .game-card .item.selected:hover {
    background: var(--g-brand-diag); border-color: transparent; color: var(--c-white);
}
/* certa/errada: proposta isolada; resultados XD mantêm apenas a seleção */
.quiz-option.is-correct { background: var(--c-game-green); border-color: var(--c-game-green); color: var(--c-white); }
.quiz-option.is-wrong { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-white); }
.quiz-option.is-correct::after, .quiz-option.is-wrong::after {
    content: ""; margin-left: auto; font-family: var(--font-icon-solid); font-weight: var(--fw-black); font-size: var(--fs-body);
}
.quiz-option.is-correct::after { content: "\f00c"; }
.quiz-option.is-wrong::after { content: "\f00d"; }
.quiz-result--won .quiz-option, .quiz-result--lost .quiz-option, #quiz .game-card.is-won .quiz-option, #quiz .game-card.is-lost .quiz-option {
    background: var(--c-white); border-color: var(--quiz-option-border); color: var(--quiz-option-text);
}
.quiz-result--won .quiz-option.is-selected, .quiz-result--lost .quiz-option.is-selected, #quiz .game-card.is-won .quiz-option.is-selected, #quiz .game-card.is-lost .quiz-option.is-selected {
    background: var(--g-brand-diag); border-color: transparent; color: var(--c-white);
}
.quiz-result--won .quiz-option::after, .quiz-result--lost .quiz-option::after, #quiz .game-card.is-won .quiz-option::after, #quiz .game-card.is-lost .quiz-option::after { content: none; }
.quiz-option.is-disabled { pointer-events: none; }
.quiz-option__index { margin-right: var(--sp-2); }
#quiz .game-card #btnEnviar { --btn-bg: var(--c-navy); --btn-bg-h: var(--c-navy-hover); --btn-bd: var(--btn-bg); --btn-bd-h: var(--btn-bg-h); }

.quiz-result { margin: var(--sp-4) 0 var(--sp-2); }
.quiz-result--won .game-card__subtitle { color: var(--c-text); }
.game-card.is-won.quiz-result--won .game-card__subtitle, .game-card.is-lost.quiz-result--lost .game-card__subtitle { color: var(--c-text); }   /* XD 84/88/81/85: texto neutro, só [Nome] em laranja */
.quiz-result--won .quiz-result__title { color: var(--c-brand-a); }
.quiz-result--lost .quiz-result__title { color: var(--c-text); }
.quiz-result__title { margin: 0 0 var(--sp-4); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); }
/* Resumo das respostas (XD 85/88): pergunta Bold 18/28 #ef5942 + opções em cards. A regra legada pinta h3 de branco. */
.game-card .quiz-summary { margin: 0 0 var(--sp-6); }
.game-card .quiz-summary h3.quiz-question { margin: 0 auto var(--sp-5); color: var(--c-brand-a); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.game-card .quiz-summary .quiz-option { cursor: default; }
.game-card .quiz-summary .quiz-option:hover { background: var(--c-white); border-color: var(--quiz-option-border); }
.game-card .quiz-summary .quiz-option.is-selected:hover { background: var(--g-brand-diag); border-color: transparent; }

.game-card #btnEnviar, .game-card #btnContinuar a, .game-card a#btnContinuar { width: 250px; min-width: 0; max-width: 100%; }
/* Botão do resultado do Quiz: secundário navy do DS (o #btnContinuar legado em custom.css o deixava cinza #444, raio 4) */
.game-card a#btnContinuar { height: auto; min-height: var(--btn-h); border: 2px solid var(--c-navy); border-radius: var(--radius); background: var(--c-navy); color: var(--c-white); }
.game-card a#btnContinuar:hover, .game-card a#btnContinuar:focus-visible { background: var(--c-navy-hover); border-color: var(--c-navy-hover); }
.game-card #loading { margin: var(--sp-4) 0; color: var(--c-brand-b); }

/* ---- Mobile (428 → card 349) ---- */
@media (max-width: 991.98px) {
    .game-page { padding: 50px 40px 40px; }
    .game-page--won { background-size: cover; }
    .game-card { max-width: 349px; padding: 30px 20px 40px; }
    .game-card__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
    .game-card__subtitle, .quiz-question, #quiz .game-card .titleQuestion, #quiz .game-card .box-quiz-question .special-title {
        font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--quiz-option-width-mobile);
    }
    .game-alert, .game-card #instrucoes.alert { max-width: 307px; padding: 28px 20px; }
    .quiz-option, #quiz .game-card .item { max-width: var(--quiz-option-width-mobile); }
    .game-card .wheel-container { width: min(349px, calc(100% + 40px)); max-width: none; margin-right: -20px; margin-left: -20px; }
    .game-card .scratchpad { width: min(309px, calc(100% + 1px)); max-width: none; }
    .game-card.is-won .game-card__actions .btn { width: 268px; }
    .game-card #spinButton { width: 268px; }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-option, #quiz .game-card .item, .game-card #spinButton { transition: none; }
}

/* ===== components/confirmation.css ===== */
/* ==========================================================================
   DS — CONFIRMAÇÃO / SUCESSO  (WF-11078)
   Spec C §1.4 (Cadastro Realizado 35/41, avisos 31/38 44/49), §1.5 (confirmações
   30/32, 46/52, 53/57). Usa .page-card (panel.css). O XD NÃO desenha ícone de sucesso:
   o círculo é OPCIONAL (.confirmation__icon — proposta [NÃO VERIFICADO], spec C §10.6).
   ========================================================================== */

.confirmation { text-align: left; }
.confirmation--center { text-align: center; }

.confirmation__icon {                 /* opcional (proposta): círculo 72px */
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; margin: 0 auto var(--sp-5);
    border-radius: 50%; background: var(--c-game-green); color: var(--c-white);
    font-size: 30px;
}
.confirmation__icon--danger { background: var(--c-danger); }

.confirmation__title {
    margin: 0 0 var(--sp-4);
    padding: 0 19px;                  /* padding esq. 49 no card de 565 (30 + 19) */
    font-size: var(--fs-h1);
    font-size: 28px; line-height: 38px;   /* XD: 22 com lh 18 → usar ≥ 28 (spec C §9.6) */
    font-weight: var(--fw-bold); color: var(--c-text);
}
.confirmation--center .confirmation__title { padding: 0; text-align: center; font-size: 22px; line-height: 26px; color: var(--c-text-strong); }

.confirmation__text {
    max-width: 469px; margin: 0 0 var(--sp-6);
    padding: 0 19px;
    font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-medium); color: var(--c-text);
}
.confirmation--center .confirmation__text { max-width: 269px; margin-left: auto; margin-right: auto; padding: 0; text-align: center; font-weight: var(--fw-regular); color: var(--c-text-strong); }
.confirmation__text p { margin: 0 0 var(--sp-3); }
.confirmation__text strong, .confirmation__text b { font-weight: var(--fw-bold); }

.confirmation__actions { display: flex; flex-direction: column; align-items: center; gap: 19px; margin-top: var(--sp-6); }
.confirmation__actions .btn { width: 250px; max-width: 100%; }
.confirmation__actions--wide .btn { width: 268px; }
/* Aceito/Não Aceito: desktop lado a lado (Não Aceito à esquerda); 2×268 + gap não cabem nos 505px do card, então os botões dividem a largura */
.confirmation .form-actions { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 19px; }
.confirmation .form-actions > .btn { flex: 1 1 0; min-width: 0; width: auto; }
@media (max-width: 991.98px) {
    .confirmation .form-actions { flex-direction: column-reverse; align-items: center; gap: 19px; }
    .confirmation .form-actions > .btn { flex: none; width: var(--btn-w); }
}

/* Aviso "Atenção!" (33/39) — 564×80, r3 */
.confirmation__warning {
    margin: var(--sp-5) 0; padding: 18px 36px;
    background: var(--c-danger-bg); border: .25px solid var(--c-pink); /* ajuste de 1 unidade: #fe245c→#ff245c */ border-radius: var(--radius-xs);
    color: var(--c-pink); font-size: var(--fs-small); line-height: 24px; font-weight: var(--fw-medium); text-align: center;
}

/* Flash de sucesso legado (.alert-success) sobre página de confirmação = Alerta de Sucesso do XD */
.confirmation .alert-success {
    background: var(--c-success-bg); border: .5px solid var(--c-success-border); border-radius: 5px; color: var(--c-game-green-dark);
    box-shadow: 0 3px 7.5px rgba(68, 68, 68, .06); font-weight: var(--fw-bold);
}

@media (max-width: 991.98px) {
    .confirmation__title { padding: 0; font-size: 22px; line-height: 32px; }
    .confirmation__text { padding: 0; }
    .confirmation__actions--mobile-200 .btn { width: 200px; }     /* 46/52 [NÃO VERIFICADO] */
}

/* ===== components/utilities.css ===== */
/* ==========================================================================
   Design System — UTILITÁRIOS (WF-11078)
   Só o que o Bootstrap 4.4.1 não tem (cores via tokens, gap, fundos de marca). Carrega por último.
   ========================================================================== */

/* Cores de texto via tokens (Bootstrap já cobre .text-white/.text-muted) */
.text-navy { color: var(--c-navy); }
.text-pink { color: var(--c-pink); }
.text-ink { color: var(--c-text-strong); }
.text-caption { color: var(--c-text-caption); }
.text-success-ds { color: var(--c-success); }
.text-danger-ds { color: var(--c-danger); }

/* Fundos (também ligam o anel de foco branco — ver base.css) */
.bg-navy { background-color: var(--c-navy); }
.bg-pink { background-color: var(--c-pink); }
.bg-brand { background-image: var(--g-brand-diag); background-color: var(--c-brand-b); }
.bg-brand-vert { background-image: var(--g-brand-vert); background-color: var(--c-brand-b); }
.bg-surface { background-color: var(--c-surface-1); }

/* .on-dark: marca um contêiner escuro sem definir fundo (foco branco) */
.on-dark { color: var(--c-white); }

/* gap para flex/grid (Bootstrap 4 não tem) — escala de 4 do token --sp-* */
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

.is-hidden { display: none; }
.radius { border-radius: var(--radius); }
.radius-lg { border-radius: var(--radius-lg); }
.w-btn { width: var(--btn-w, 268px); max-width: 100%; }

/* Visível só em mobile / só em desktop (corte do DS: 992) */
@media (min-width: 992px) { .only-mobile { display: none; } }
@media (max-width: 991.98px) { .only-desktop { display: none; } }