/* Página da Lumi Casa Azul: identidade da versão atual do sistema ("nova cara").
   Carregado por último nesta página. O modelo de cor vem de html[data-paleta]. */

html[data-paleta='ceu'] { --p-marca: #3b7ddd; --p-destaque: #ff9466; --p-apoio: #9b7bea; --p-sol: #ffd166; }
html[data-paleta='lavanda'] { --p-marca: #7c5cdb; --p-destaque: #2fb39b; --p-apoio: #ff8fa8; --p-sol: #ffc857; }
html[data-paleta='menta'] { --p-marca: #0f8c79; --p-destaque: #ff7466; --p-apoio: #8c6ce0; --p-sol: #ffd166; }
html[data-paleta='aurora'] { --p-marca: #d94a7e; --p-destaque: #f5a524; --p-apoio: #7c5cdb; --p-sol: #ffc857; }
html[data-paleta='jardim'] { --p-marca: #2f8a4e; --p-destaque: #f2b135; --p-apoio: #3b7ddd; --p-sol: #ffd166; }

html[data-tema='claro'] {
  --marca: var(--p-marca);
  --marca-botao: color-mix(in srgb, var(--p-marca) 88%, #000);
  --fundo: color-mix(in srgb, var(--p-marca) 6%, #fbfcff);
  --fundo-2: color-mix(in srgb, var(--p-marca) 10%, #fff);
  --cartao: #ffffff;
  --texto: color-mix(in srgb, var(--p-marca) 20%, #1b1f2c);
  --suave: color-mix(in srgb, var(--p-marca) 16%, #58627c);
  --linha: color-mix(in srgb, var(--p-marca) 12%, #e9ecf3);
  --lavanda: var(--p-apoio);
  --lavanda-suave: color-mix(in srgb, var(--p-marca) 9%, #fff);
  --violeta-texto: color-mix(in srgb, var(--p-marca) 76%, #000);
  --azul-suave: color-mix(in srgb, var(--p-marca) 13%, #fff);
  --azul-texto: color-mix(in srgb, var(--p-marca) 76%, #000);
  --verde-suave: #dff5ec;
  --verde-texto: #17735a;
  --destaque-suave: color-mix(in srgb, var(--p-destaque) 16%, #fff);
  --destaque-texto: color-mix(in srgb, var(--p-destaque) 55%, #000);
  --brilho-azul: 0 10px 22px -10px color-mix(in srgb, var(--p-marca) 70%, transparent);
  --sombra: 0 1px 2px color-mix(in srgb, var(--p-marca) 8%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--p-marca) 30%, transparent);
  --sombra-forte: 0 28px 60px -26px color-mix(in srgb, var(--p-marca) 42%, transparent);
  --topo-fundo: rgba(255, 255, 255, .8);
}

html[data-tema='escuro'] {
  --marca: var(--p-marca);
  --marca-botao: color-mix(in srgb, var(--p-marca) 88%, #000);
  --fundo: color-mix(in srgb, var(--p-marca) 8%, #10131b);
  --fundo-2: color-mix(in srgb, var(--p-marca) 11%, #141722);
  --cartao: color-mix(in srgb, var(--p-marca) 9%, #181b26);
  --texto: #eef1f8;
  --suave: color-mix(in srgb, var(--p-marca) 22%, #a5adc2);
  --linha: color-mix(in srgb, var(--p-marca) 16%, #292e3d);
  --lavanda: var(--p-apoio);
  --lavanda-suave: color-mix(in srgb, var(--p-marca) 18%, #181b26);
  --violeta-texto: color-mix(in srgb, var(--p-marca) 55%, #fff);
  --azul-suave: color-mix(in srgb, var(--p-marca) 24%, #181b26);
  --azul-texto: color-mix(in srgb, var(--p-marca) 55%, #fff);
  --verde-suave: #183a31;
  --verde-texto: #7fdcbc;
  --destaque-suave: color-mix(in srgb, var(--p-destaque) 20%, #181b26);
  --destaque-texto: color-mix(in srgb, var(--p-destaque) 60%, #fff);
  --sombra: 0 1px 2px #0006, 0 12px 30px -14px #000a;
  --sombra-forte: 0 28px 60px -22px #000c;
  --topo-fundo: color-mix(in srgb, var(--cartao) 85%, transparent);
}

body {
  font-family: Figtree, 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--p-marca) 16%, transparent) 0, transparent 46%),
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p-destaque) 12%, transparent) 0, transparent 40%),
    var(--fundo);
  background-attachment: fixed;
  transition: color .4s ease;
}
h1, h2 { font-family: Nunito, 'Trebuchet MS', system-ui, sans-serif; letter-spacing: -.012em; }
h1 { font-weight: 900; }
h2 { font-weight: 800; }
.heroi h1 { letter-spacing: -.025em; line-height: 1.04; }
.fluxo-texto h3, .lumiar-texto h2 { font-family: Nunito, 'Trebuchet MS', system-ui, sans-serif; letter-spacing: -.01em; }
.destaque { color: var(--azul-texto); }
:focus-visible { outline-color: var(--marca); }
::selection { background: color-mix(in srgb, var(--p-marca) 25%, #fff); }

/* Logotipo em duas linhas, como na tela de entrada */
.marca-icone { width: 38px; height: 38px; stroke: var(--marca); stroke-width: 1.75; }
html[data-tema='escuro'] .marca-icone { stroke: var(--azul-texto); }
.marca-nome { display: grid; line-height: 1.02; }
.marca-nome b { font-family: Nunito, 'Trebuchet MS', system-ui, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: -.01em; }
.marca-nome small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--suave); }
.whats-avatar svg, html[data-tema='escuro'] .whats-avatar svg { stroke: var(--marca); stroke-width: 1.75; }

/* Componentes */
.cartao { border-radius: 24px; box-shadow: var(--sombra), inset 0 0 0 1px var(--linha); transition: background-color .4s, box-shadow .25s; }
.botao { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background-color .25s; }
.botao:active { transform: scale(.97); }
.botao-primario { color: #fff; background: var(--marca-botao); position: relative; overflow: hidden; }
.botao-primario:hover { background: color-mix(in srgb, var(--p-marca) 74%, #000); box-shadow: var(--brilho-azul); }
html[data-tema='escuro'] .botao-primario:hover { box-shadow: var(--brilho-azul); }
.botao-primario::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
}
.botao-primario:hover::after { transition: transform .7s ease; transform: translateX(120%) skewX(-20deg); }
.pilula { border-radius: 999px; font-weight: 600; }
.selo { box-shadow: var(--sombra), inset 0 0 0 1px var(--linha); }
.abas button { border-radius: 999px; }
.abas button[aria-selected='true'] { color: #fff; background: var(--marca-botao); }
.campo input, .campo textarea, html[data-tema='escuro'] .campo input, html[data-tema='escuro'] .campo textarea { background: var(--cartao); border-color: var(--linha); }
.campo input:focus, .campo textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-marca) 22%, transparent); }
.campo input::placeholder, .campo textarea::placeholder, html[data-tema='escuro'] .campo input::placeholder, html[data-tema='escuro'] .campo textarea::placeholder { color: var(--suave); }
html[data-tema='escuro'] .secao-tingida, html[data-tema='escuro'] .personalizar { background: var(--fundo-2); }
.secao-tingida { background: color-mix(in srgb, var(--p-marca) 7%, #fff); transition: background-color .4s; }
html[data-tema='escuro'] .secao-tingida { background: var(--fundo-2); }
.chip[aria-checked='true'] { background: var(--marca-botao); color: #fff; }
.lista-check li::before, html[data-tema='escuro'] .lista-check li::before { background-color: var(--azul-suave); }
.faq summary::after, html[data-tema='escuro'] .faq summary::after { background-color: var(--azul-suave); }
.aviso-privacidade { transition: background-color .4s; }
.linha-progresso { background: linear-gradient(90deg, var(--p-marca), var(--p-apoio), var(--p-destaque)); }
.barra-progresso { background: linear-gradient(90deg, var(--p-marca), var(--p-destaque)); }

/* Abertura com luz em movimento */
.heroi::before, html[data-tema='escuro'] .heroi::before {
  opacity: 1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--p-apoio) 22%, transparent), transparent 70%),
    radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--p-marca) 24%, transparent), transparent 70%);
  animation: deriva 12s ease-in-out infinite alternate;
}
@keyframes deriva { to { transform: translate(-7%, 8%) scale(1.14); } }
.heroi-visual[data-inclinar] { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.lumi-fala-balao, .flutuante { font-family: inherit; }

/* Modelos de cor, como em Configurações > Aparência */
.paletas { grid-column: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.paletas-titulo { grid-column: 1 / -1; font-size: 14.5px; font-weight: 600; color: var(--suave); }
.paleta {
  display: grid; gap: 8px; padding: 8px; border-radius: 16px; border: 2px solid var(--linha); background: var(--cartao); color: var(--texto);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 44px;
  transition: border-color .25s, transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s;
}
.paleta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.paleta[aria-pressed='true'] { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-marca) 22%, transparent); }
.paleta-faixa { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; height: 32px; border-radius: 9px; overflow: hidden; }
.paleta-faixa i { display: block; }

/* A cor acompanha a troca de modelo */
.pilula, .recurso-icone, .dores-icone, .lt-numero, .passos li::before { transition: background-color .4s, color .4s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }

/* Abertura: a linha de batimento vira o logotipo */
.splash.splash-lumi { background: radial-gradient(ellipse at 20% 10%, #e6defc, transparent 55%), radial-gradient(ellipse at 90% 90%, #d9f3ec, transparent 50%), #f6f4fd; }
.splash-lumi > * { grid-area: 1 / 1; }
.splash .lumi-ecg { width: min(92vw, 760px); height: auto; animation: lumi-ecg-sai .4s ease 1.1s forwards; }
.lumi-ecg path { fill: none; stroke: url(#ecg-g); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: splash-desenha 1.1s linear .02s forwards; }
.lumi-marca { display: inline-flex; align-items: center; gap: 16px; color: #2b2550; opacity: 0; animation: lumi-marca-entra .6s cubic-bezier(.3, 1.5, .5, 1) 1.05s forwards; }
.splash .lumi-marca svg { width: 84px; height: 84px; fill: none; stroke: #7c5cdb; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; animation: none; }
.lumi-marca span { display: grid; line-height: 1.02; text-align: left; }
.lumi-marca b { font-family: Nunito, system-ui, sans-serif; font-size: 44px; font-weight: 900; }
.lumi-marca small { font-size: 27px; color: #5e5a86; }
.lumi-onda { width: 150px; height: 150px; border-radius: 50%; opacity: 0; box-shadow: 0 0 0 2px #7c5cdb, 0 0 34px 10px rgba(124, 92, 219, .4); animation: lumi-onda .8s cubic-bezier(.12, .75, .3, 1) 1.7s forwards; }
@keyframes lumi-ecg-sai { to { opacity: 0; transform: scale(1.04); } }
@keyframes lumi-marca-entra { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes lumi-onda { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(11); } }
.som-botao { color: var(--marca-botao); background: color-mix(in srgb, var(--cartao) 86%, transparent); box-shadow: var(--sombra-forte), inset 0 0 0 1px var(--linha); }
html[data-tema='escuro'] .som-botao { color: var(--texto); }

/* Personagem na página */
.lumi-mini { width: 80px; height: 103px; margin-right: -6px; }
.lumi-fala { top: -52px; }
.lumiar-personagem { aspect-ratio: 140 / 180; max-width: 300px; margin: 0 auto; background: transparent; }
.lumiar-palco { background: radial-gradient(ellipse at 12% 60%, color-mix(in srgb, var(--p-apoio) 18%, transparent), transparent 55%), var(--cartao); }
.contato-lumi { display: block; width: 84px; height: 108px; margin: 0 auto 2px; }
.galeria-item .ap { border-bottom: 1px solid var(--linha); }

/* Rodapé */
.rodape-copy a { color: var(--azul-texto); }

@media (max-width: 1080px) {
  .paletas { grid-column: auto; }
}
@media (max-width: 640px) {
  .paletas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paletas .paleta:last-child { grid-column: span 2; }
  .marca-nome b { font-size: 18px; }
  .marca-nome small { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .heroi-visual[data-inclinar] { transform: none; }
  .botao-primario::after { display: none; }
}