/* ===========================================================================
   CATÁLOGO DE TARIFAS — El Misti
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css, mesma
   paleta e mesmos nomes do Índice de Painéis (indice-paineis/public/styles.css)
   — é da mesma família de páginas internas, tem que parecer a mesma casa.
   Este arquivo é servido SEM login: nada de código de cupom, link ou nome de
   influenciador aqui. Tudo isso chega pelo dados.json.
   =========================================================================== */
:root {
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #BF360C;
  --color-accent-text: #00695C;

  --color-warning-fill: #F9A825;
  --color-warning-bg: rgba(249,168,37,.14);
  --color-warning-border: rgba(249,168,37,.5);
  --color-danger-bg: rgba(198,40,40,.10);
  --color-info-bg: rgba(21,101,192,.10);
  --color-code-bg: #eef3ee;

  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 20px;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-base: 1.3;
  --lh-relaxed: 1.5;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);

  --touch-target: 44px;
}

[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;

  --color-danger-bg: rgba(239,83,80,.14);
  --color-info-bg: rgba(100,181,246,.14);
  --color-code-bg: #0d140d;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] empata em especificidade com qualquer classe que declare display;
   sem esta regra o elemento "escondido" ainda aparece. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:56px}
body{font-family:var(--font-body);font-size:var(--fs-md);background:var(--color-surface);color:var(--color-text);line-height:var(--lh-relaxed);overflow-x:hidden}
a{color:var(--color-info-text)}
:focus-visible{outline:2px solid var(--color-brand-primary-light);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
.header{background:var(--color-brand-dark);color:#fff;padding:var(--sp-2) var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.header-logo-img{height:28px;width:auto}
.header-title{flex:1;text-align:left;font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:.5px;line-height:var(--lh-base)}
.header-sub{font-size:var(--fs-sm);opacity:.7;display:block;margin-top:1px;font-weight:var(--fw-regular);letter-spacing:.2px}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;flex-shrink:0}
.theme-toggle:hover{background:rgba(255,255,255,.15)}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

/* ---------- Navegação entre seções ---------- */
.secnav{position:sticky;top:0;z-index:5;display:flex;gap:var(--sp-1);overflow-x:auto;background:var(--color-surface-card);border-bottom:1px solid var(--color-border);padding:0 var(--sp-3);scrollbar-width:thin}
.secnav a{flex-shrink:0;display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-text-muted);text-decoration:none;border-bottom:3px solid transparent}
.secnav a:hover{color:var(--color-heading);border-bottom-color:var(--color-brand-primary-light)}

/* ---------- Estrutura ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-6)}
.sec{margin-top:var(--sp-8)}
.sec:first-child{margin-top:0}
.sec-titulo{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:var(--lh-base);margin-bottom:var(--sp-3)}
.sec-titulo-2{margin-top:var(--sp-8)}
.sec-desc{font-size:var(--fs-md);color:var(--color-text-muted);margin:calc(-1 * var(--sp-2)) 0 var(--sp-3)}
.muted{color:var(--color-text-muted)}

/* ---------- Estado de carregamento / erro ---------- */
.estado{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--color-text-muted)}
.estado-erro{background:var(--color-surface-card);border:1px solid var(--color-border);border-left:4px solid var(--color-danger-text);border-radius:var(--radius-md);text-align:left;max-width:640px;margin:var(--sp-6) auto;display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;color:var(--color-text)}
.estado-erro strong{font-size:var(--fs-lg);color:var(--color-heading)}

/* ---------- Resumo ---------- */
.resumo-para{font-size:var(--fs-lg);max-width:80ch;color:var(--color-text)}
.resumo-atualizado{font-size:var(--fs-base);color:var(--color-text-muted);margin:var(--sp-1) 0 var(--sp-4)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-3)}
.kpi{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.kpi-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.3px}
.kpi-value{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.2;font-variant-numeric:tabular-nums}

/* ---------- Cartões genéricos ---------- */
.card{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-4)}
.card h3{font-size:var(--fs-lg);color:var(--color-heading);margin-bottom:var(--sp-1)}
.card .frase{font-weight:var(--fw-semibold);color:var(--color-brand-primary-light);margin-bottom:var(--sp-1)}
[data-theme="dark"] .card .frase{color:var(--color-success-text)}
.conceitos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}

/* ---------- Como o site decide ---------- */
.destaque{background:var(--color-surface-card);border:1px solid var(--color-border);border-left:6px solid var(--color-brand-primary-light);border-radius:var(--radius-md);padding:var(--sp-5) var(--sp-5);box-shadow:var(--shadow-sm)}
.destaque-chamada{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.25;margin-bottom:var(--sp-2)}
.destaque-texto{max-width:90ch}
.subtitulo{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-heading);margin:var(--sp-5) 0 var(--sp-2)}
.regras-lista{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.regra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--color-surface-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}
.regra-se,.regra-entao{padding:var(--sp-2) var(--sp-3)}
.regra-se{background:var(--color-table-head-bg)}
.regra-entao{border-left:3px solid var(--color-brand-primary-light)}
.regra b{display:block;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.3px;color:var(--color-text-muted)}
.principios{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
.vive{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-2)}
.vive .onde{font-weight:var(--fw-semibold);margin-bottom:var(--sp-1)}
.codigo{font-family:var(--font-mono);font-size:var(--fs-base);background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-2);overflow-wrap:anywhere}
.bloco-codigo{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3);margin-top:var(--sp-2)}
.bloco-codigo code{font-family:var(--font-mono);font-size:var(--fs-md);flex:1;min-width:200px;overflow-wrap:anywhere;color:var(--color-heading)}
.teste-vida{margin-top:var(--sp-3)}
.teste-vida p{margin-bottom:var(--sp-1)}

/* ---------- Filtros ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:flex-end;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--sp-3)}
.filtro{display:flex;flex-direction:column;gap:2px}
.filtro-busca{flex:1;min-width:220px}
.filtro-rotulo{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.filtros select,.busca-input{min-height:var(--touch-target);padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-md);font-family:inherit;background:var(--color-surface);color:var(--color-text);width:100%}
.filtros select{cursor:pointer;min-width:190px}
.busca-input::placeholder{color:var(--color-text-muted)}
.busca-input:focus,.filtros select:focus{outline:none;border-color:var(--color-brand-primary-light);box-shadow:0 0 0 2px rgba(46,125,50,.25)}
.filtros-contagem{font-size:var(--fs-base);color:var(--color-text-muted);margin:var(--sp-2) 0 var(--sp-3)}

/* ---------- Botões (mesmo padrão do Índice de Painéis) ---------- */
.btn-abrir{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 var(--sp-3);border-radius:var(--radius-sm);background:var(--color-brand-primary);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);text-decoration:none;white-space:nowrap}
.btn-abrir:hover{background:var(--color-brand-primary-light)}
.btn-copiar{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-card);color:var(--color-text);font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.btn-copiar:hover{background:var(--color-hover-bg)}
.btn-copiar.copiado{border-color:var(--color-success-text);color:var(--color-success-text)}
.btn-link{min-height:32px;padding:0;border:0;background:none;color:var(--color-info-text);font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-align:left}
.btn-link:hover{color:var(--color-brand-primary-light)}
.btn-ver{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--touch-target);padding:0 var(--sp-4);border:1px solid var(--color-brand-primary-light);border-radius:var(--radius-sm);background:transparent;color:var(--color-brand-primary-light);font-family:inherit;font-size:var(--fs-md);font-weight:var(--fw-semibold);cursor:pointer}
.btn-ver:hover{background:var(--color-brand-primary-bg)}
[data-theme="dark"] .btn-ver{color:var(--color-success-text);border-color:var(--color-success-text)}
[data-theme="dark"] .btn-ver:hover{background:rgba(46,125,50,.14)}

/* ---------- Família ---------- */
.fam{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--sp-4);overflow:hidden}
.fam-topo{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);border-top:4px solid var(--color-brand-primary-light)}
.fam-oferta .fam-topo{border-top-color:var(--color-brand-primary-light)}
.fam-cupom .fam-topo{border-top-color:var(--color-info-text)}
.fam-base .fam-topo{border-top-color:var(--color-text-muted)}
.fam-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.fam-nome{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);line-height:1.2}
.badge{display:inline-block;padding:2px var(--sp-2);border-radius:var(--radius-full);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap}
.badge-oferta{background:var(--color-brand-primary-bg);color:var(--color-brand-primary)}
[data-theme="dark"] .badge-oferta{background:rgba(46,125,50,.22);color:var(--color-success-text)}
.badge-cupom{background:var(--color-info-bg);color:var(--color-info-text)}
.badge-base{background:rgba(95,112,96,.16);color:var(--color-text-muted)}
.fam-meta{font-size:var(--fs-base);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.fam-resumo{margin-top:var(--sp-2);max-width:90ch;font-size:var(--fs-lg)}
.fam-pres{margin-top:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-base)}
.pres-linha{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.pres-rotulo{font-weight:var(--fw-semibold);color:var(--color-text-muted);margin-right:var(--sp-1)}
.chip{display:inline-block;padding:2px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:var(--fw-semibold)}
.chip-tem{background:var(--color-brand-primary-bg);color:var(--color-brand-primary)}
[data-theme="dark"] .chip-tem{background:rgba(46,125,50,.22);color:var(--color-success-text)}
.chip-falta{background:var(--color-warning-bg);color:var(--color-warning-text);border:1px dashed var(--color-warning-border)}
.fam-textos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);padding:var(--sp-4) var(--sp-5)}
.fam-extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);padding:0 var(--sp-5) var(--sp-4)}
.bloco-rotulo{font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.3px;color:var(--color-text-muted);margin-bottom:var(--sp-1)}
.bloco ul{padding-left:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-1)}
.fam-extra .bloco{background:var(--color-surface);border-radius:var(--radius-sm);padding:var(--sp-3)}
.aviso-confirmar{margin:0 var(--sp-5) var(--sp-4);padding:var(--sp-2) var(--sp-3);background:var(--color-warning-bg);border:1px dashed var(--color-warning-border);border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--color-text)}
.aviso-confirmar strong{color:var(--color-warning-text)}
.nota-lista{margin:0 var(--sp-5) var(--sp-5);padding:var(--sp-3) var(--sp-4);background:var(--color-info-bg);border-radius:var(--radius-sm);border-left:4px solid var(--color-info-text)}
.fam-planos{padding:var(--sp-3) var(--sp-5) var(--sp-5);border-top:1px solid var(--color-border)}
.fam-planos-corpo{margin-top:var(--sp-3)}

/* ---------- Tabela de planos ---------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.tabela{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.tabela th{background:var(--color-table-head-bg);padding:var(--sp-2) var(--sp-3);text-align:left;font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--color-brand-primary);white-space:nowrap}
.tabela td{padding:var(--sp-3);border-bottom:1px solid var(--color-border);vertical-align:top;overflow-wrap:anywhere}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:hover td{background:var(--color-hover-bg)}
.c-plano{min-width:220px}
.c-prop{min-width:90px}
.c-desc{min-width:64px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-regras{min-width:170px}
.c-valid{min-width:150px}
.c-cupom{min-width:230px}
.c-id{min-width:80px;font-family:var(--font-mono);color:var(--color-text-muted)}
.plano-nome{font-weight:var(--fw-bold);color:var(--color-heading);font-size:var(--fs-md);display:block}
.plano-sub{display:block;font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:2px}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-1)}
.tag{display:inline-block;padding:1px var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);background:var(--color-info-bg);color:var(--color-info-text)}
.alerta{margin-top:var(--sp-2);padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-sm);font-size:var(--fs-sm);line-height:var(--lh-relaxed);background:var(--color-warning-bg);border-left:3px solid var(--color-warning-fill);color:var(--color-text)}
.alerta-erro{background:var(--color-danger-bg);border-left-color:var(--color-danger-text)}
.alerta-rotulo{font-weight:var(--fw-bold);color:var(--color-warning-text);margin-right:var(--sp-1)}
.alerta-erro .alerta-rotulo{color:var(--color-danger-text)}
.regras-itens{display:flex;flex-direction:column;gap:2px}
.regras-itens span{display:block}
.fecha{display:block;color:var(--color-warning-text);white-space:nowrap}
.cal{margin-top:var(--sp-2);max-height:240px;overflow-y:auto;list-style:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.cal li{padding:var(--sp-1) var(--sp-2);border-bottom:1px solid var(--color-border);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.cal li:last-child{border-bottom:0}
.cal .cal-data{font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;display:block}
.cal .cal-fechado .cal-data{color:var(--color-warning-text)}
.cupom-box{display:flex;flex-direction:column;gap:var(--sp-2)}
.cupom-linha{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1)}
.cupom-rotulo{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-text-muted);min-width:44px}
.cupom-codigo{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--color-heading);background:var(--color-code-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px var(--sp-2);overflow-wrap:anywhere}
.cupom-nenhum{color:var(--color-text-muted)}

/* ---------- Links por propriedade ---------- */
.props{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--sp-3)}
.prop h3{font-size:var(--fs-lg)}
.prop-meta{font-size:var(--fs-base);color:var(--color-text-muted);margin-bottom:var(--sp-3)}
.prop-ids{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-base);margin-bottom:var(--sp-3)}
.prop-ids span b{color:var(--color-text-muted);font-weight:var(--fw-semibold);margin-right:var(--sp-1)}
.prop-ids code{font-family:var(--font-mono);font-weight:var(--fw-bold)}
.link-linha{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);padding:var(--sp-2) 0;border-top:1px solid var(--color-border)}
.link-rotulo{flex:1;min-width:140px;font-weight:var(--fw-semibold)}
.link-rotulo small{display:block;font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--color-text-muted)}

/* ---------- Monitoramento, checklist, atenção ---------- */
.lista-simples{padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1);max-width:100ch}
.paineis-lista{display:flex;flex-direction:column}
.painel-linha{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) 0;border-top:1px solid var(--color-border)}
.painel-linha:first-child{border-top:0}
.painel-info{flex:1;min-width:220px}
.painel-info b{color:var(--color-heading);display:block}
.duas-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-bottom:var(--sp-3)}
.check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.check-item{display:flex;gap:var(--sp-3);background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-3) var(--sp-4)}
.check-num{flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-brand-primary-bg);color:var(--color-brand-primary);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;font-size:var(--fs-base)}
[data-theme="dark"] .check-num{background:rgba(46,125,50,.22);color:var(--color-success-text)}
.check-item h3{font-size:var(--fs-md);color:var(--color-heading);margin-bottom:2px}
.seletores{margin-top:var(--sp-4)}
.seletor-linha{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2) 0;border-top:1px solid var(--color-border)}
.seletor-linha .codigo{flex:1;min-width:240px}
.seletor-linha .seletor-o-que{flex:1;min-width:180px}
.atencao-nota{margin-bottom:var(--sp-3);color:var(--color-text-muted)}
.atencao-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.atencao-item{background:var(--color-surface-card);border-left:4px solid var(--color-warning-fill);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-3) var(--sp-4)}
.atencao-item h3{font-size:var(--fs-md);color:var(--color-heading);margin-bottom:2px}
.glossario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.glossario div{background:var(--color-surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--sp-3) var(--sp-4)}
.glossario dt{font-weight:var(--fw-bold);color:var(--color-heading)}

.vazio{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--color-text-muted);background:var(--color-surface-card);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.rodape{padding:var(--sp-4) var(--sp-3) var(--sp-6);text-align:center;font-size:var(--fs-sm);color:var(--color-text-muted)}

/* ---------- Responsivo ---------- */
@media(max-width:1000px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .fam-textos{grid-template-columns:1fr}
  .fam-extra{grid-template-columns:1fr}
  .conceitos,.principios,.vive,.check,.atencao-lista,.glossario,.duas-colunas{grid-template-columns:1fr}
}

/* Tabela vira cartões: mesmos dados, cada coluna ganha o próprio rótulo. */
@media(max-width:768px){
  .wrap{padding:var(--sp-3) var(--sp-3) var(--sp-6)}
  .header-title{font-size:var(--fs-md)}
  .theme-toggle{width:var(--touch-target);height:var(--touch-target)}
  .secnav a{min-height:var(--touch-target)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .fam-topo,.fam-textos,.fam-planos{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .fam-extra{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .aviso-confirmar,.nota-lista{margin-left:var(--sp-3);margin-right:var(--sp-3)}
  .regra{grid-template-columns:1fr}
  .regra-entao{border-left:0;border-top:3px solid var(--color-brand-primary-light)}
  .props{grid-template-columns:1fr}
  .filtros select{min-width:0}
  .filtro{flex:1 1 100%}
  .busca-input,.filtros select{font-size:16px}

  .tabela-wrap{overflow:visible;border:0}
  .tabela,.tabela tbody,.tabela tr,.tabela td{display:block;width:100%}
  .tabela thead{display:none}
  .tabela tr{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--sp-3);padding:var(--sp-3)}
  .tabela td{padding:var(--sp-2) 0;border:0;border-top:1px dashed var(--color-border);min-width:0}
  .tabela td:first-child{border-top:0;padding-top:0}
  .tabela tbody tr:hover td{background:none}
  .tabela td::before{content:attr(data-label);display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.3px;color:var(--color-text-muted);margin-bottom:2px}
  .tabela td.c-plano::before{display:none}
  .c-plano,.c-prop,.c-desc,.c-regras,.c-valid,.c-cupom,.c-id{min-width:0}
  .btn-abrir,.btn-copiar{min-height:var(--touch-target);padding:0 var(--sp-4)}
  .btn-link{min-height:var(--touch-target)}
  .btn-ver{width:100%;justify-content:center}
  .cupom-rotulo{min-width:100%}
}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---------- Legenda, plano ainda não iniciado ---------- */
.legenda{font-size:var(--fs-base);color:var(--color-text-muted);margin:calc(-1 * var(--sp-1)) 0 var(--sp-3);max-width:90ch}
.legenda strong{color:var(--color-heading)}
.tag-futuro{display:block;width:fit-content;margin-top:var(--sp-1);background:var(--color-warning-bg);color:var(--color-warning-text);border:1px dashed var(--color-warning-border)}
.plano-idiomas{color:var(--color-text)}
.vale-rotulo{display:block;font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.vale{display:block;white-space:nowrap;font-variant-numeric:tabular-nums}
.alerta-comum{margin:0 0 var(--sp-3);font-size:var(--fs-base);padding:var(--sp-2) var(--sp-3)}