/* Tema FAMÍLIA · design system de redes e do site da marca (perfil laranja família).
   Fundo areia, tinta no texto, laranja #ff5200 no botão e na abertura. Sem degradê, sem sombra decorativa, sem vermelho.
   Contrastes calculados: tinta/areia 14,7 · tinta/branco 17 · tinta/laranja 5,2 · branco/laranja 3,3 (só título grande). */
:root {
  --bg: #f0eee9; --card: #ffffff; --ink: #181d1f; --ink-2: #424647;
  --campo-borda: #6b6f70; --trilho: #d9d6cf; --barra: #ff5200;
  --btn-bg: #ff5200; --btn-ink: #181d1f; --btn-borda: #ff5200; --btn-hover-bg: #181d1f; --btn-hover-ink: #ffffff;
  --sel-bg: #fee6d2; --sel-borda: #181d1f; --sel-marca: #181d1f; --sel-check: #ffffff;
  --foco: #181d1f; --foco-halo: #ffffff;
  --erro-bg: #fcefb4;
  --hero-bg: #ff5200; --hero-ink: #181d1f; --kw: #afe2ff;
}
body[data-tela="abertura"] {
  --ink-2: #181d1f;
  --btn-bg: #181d1f; --btn-ink: #ffffff; --btn-borda: #181d1f; --btn-hover-bg: #ffffff; --btn-hover-ink: #181d1f;
  --foco: #181d1f; --foco-halo: #ffffff;
}
body[data-tela="abertura"] .btn:hover { border-color: #181d1f; }
/* Logo em branco sobre o laranja: a marca só usa o branco quando o fundo briga com o laranja (DS redes §7). */
body[data-tela="abertura"] .logo img { filter: brightness(0) invert(1); }
/* Título da abertura em branco e a palavra de destaque no azul claro da paleta (#afe2ff). O texto corrido continua em tinta:
   branco em corpo de texto não passa no contraste sobre o laranja. */
body[data-tela="abertura"] .titulo-grande { color: #ffffff; }

/* ---------- tela "Você é...": um botão para cada público, na cor dele ---------- */
.cartao-escolha[data-escolha="familia"] { background: #ff5200; color: #181d1f; border-color: #181d1f; }   /* tinta/laranja 5,2:1 */
.cartao-escolha[data-escolha="idoso"] { background: #afe2ff; color: #183451; border-color: #183451; }     /* marinho/azul 9,2:1 */

/* ---------- caminho da PESSOA IDOSA ----------
   Design system (redes §4.2/§4.3): fundo azul #afe2ff, todo o texto em marinho #183451 (nunca branco, nunca tinta sobre o azul),
   laranja #ff5200 só como destaque de título grande, cartões brancos permitidos sobre o azul. Letra maior está no base.css. */
body[data-perfil="idoso"] {
  --bg: #afe2ff; --card: #ffffff; --ink: #183451; --ink-2: #183451;
  --campo-borda: #183451; --trilho: #ffffff; --barra: #183451;
  --btn-bg: #183451; --btn-ink: #ffffff; --btn-borda: #183451; --btn-hover-bg: #ffffff; --btn-hover-ink: #183451;
  --sel-bg: #dceeef; --sel-borda: #183451; --sel-marca: #183451; --sel-check: #ffffff;
  --foco: #183451; --foco-halo: #ffffff; --erro-bg: #ffffff;
}
body[data-perfil="idoso"][data-tela="abertura"] {
  --hero-bg: #afe2ff; --hero-ink: #183451; --kw: #ff5200; --ink-2: #183451;
  --btn-bg: #183451; --btn-ink: #ffffff; --btn-borda: #183451; --btn-hover-bg: #ffffff; --btn-hover-ink: #183451;
  --foco: #183451; --foco-halo: #ffffff;
}
body[data-perfil="idoso"][data-tela="abertura"] .titulo-grande { color: #183451; }
body[data-perfil="idoso"][data-tela="abertura"] .logo img { filter: none; }
body[data-perfil="idoso"][data-tela="abertura"] .btn:hover { border-color: #183451; }