/* NutriComp visual system — Citrus Grove */
@font-face {
  font-family: "Fraunces";
  src: url("brand-assets/assets/fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("brand-assets/assets/fonts/NunitoSans-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --creme: #F8F4E9;
  --creme-claro: #FCFAF4;
  --verde-principal: #225E3E;
  --verde-profundo: #173026;
  --verde-folha: #9CC46B;
  --verde-menta: #D7E9D9;
  --amarelo-limao: #F2C14E;
  --laranja-suave: #E76F51;
  --azul-ceu: #8EA8D1;
  --grafite-verde: #1F3D33;
  --texto-secundario: #5A6B61;
  --borda-suave: #E3DDCB;
  --borda-media: #CFC8B2;
  --sombra-1: 0 1px 2px rgba(31, 61, 51, .06);
  --sombra-2: 0 2px 8px rgba(31, 61, 51, .08);
  --sombra-3: 0 8px 24px rgba(31, 61, 51, .10);
  --raio-s: 10px;
  --raio-m: 14px;
  --raio-g: 20px;
  --raio-pill: 999px;
  --turquesa: var(--verde-principal);
  --turquesa-claro: var(--verde-folha);
  --fundo: var(--creme);
  --branco: var(--creme-claro);
  --borda: var(--borda-suave);
  --texto: var(--grafite-verde);
  --texto-claro: var(--texto-secundario);
}

html, body {
  background-color: var(--creme);
  background-image: radial-gradient(circle at 18% 22%, rgba(31, 61, 51, .035) 0 1px, transparent 1px), radial-gradient(circle at 62% 68%, rgba(31, 61, 51, .03) 0 1px, transparent 1px);
  background-size: 14px 14px, 19px 19px;
  color: var(--grafite-verde);
  font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(156, 196, 107, .55); outline-offset: 3px; }

.tela { background: transparent; }

/* Início */
#tela-inicio {
  position: relative;
  padding: max(32px, env(safe-area-inset-top, 0px)) 24px 28px;
  gap: 26px;
  isolation: isolate;
}

#tela-inicio::before {
  content: "";
  position: absolute;
  width: 154px;
  height: 154px;
  top: -45px;
  right: -54px;
  background: url("brand-assets/assets/elementos-vetor/botanica/folhas-trio.svg") no-repeat center / contain;
  opacity: .16;
  pointer-events: none;
  z-index: -1;
}

.inicio-conteudo { width: 100%; max-width: 380px; text-align: left; }
.logo-inicio { display: block; width: min(214px, 70vw); height: auto; margin: 0 0 28px; }
.inicio-conteudo h1 {
  max-width: 9ch;
  margin: 0 0 12px;
  color: var(--verde-principal);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.4rem, 10vw, 3.15rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 72;
}
.subtitulo { max-width: 31ch; margin: 0; color: var(--texto-secundario); font-size: 1rem; line-height: 1.55; }

.objetivo-secao { max-width: 380px; }
.objetivo-titulo { margin-bottom: 12px; color: var(--grafite-verde); font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-align: left; text-transform: uppercase; }
.objetivos-grade { gap: 10px; }
.objetivo-btn {
  min-height: 82px;
  justify-content: center;
  background: rgba(252, 250, 244, .86);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-1);
  padding: 16px 12px;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.objetivo-btn:hover { background: #F1ECDC; box-shadow: var(--sombra-2); }
.objetivo-btn:active { transform: scale(.98); }
.objetivo-btn.selecionado,
.objetivo-btn.prioridade-1,
.objetivo-btn.prioridade-2,
.objetivo-btn.prioridade-3 {
  background: var(--verde-menta);
  border: 2px solid var(--verde-principal);
}
.objetivo-nome { color: var(--grafite-verde); font-size: .94rem; font-weight: 700; }
.prioridade-badge,
.badge-prioridade-1,
.badge-prioridade-2,
.badge-prioridade-3 { top: 8px; right: 8px; width: 20px; height: 20px; background: var(--verde-principal); color: var(--creme); font-size: .7rem; }
.objetivos-dica { color: var(--texto-secundario); font-size: .82rem; text-align: left; }

/* Ações e navegação */
.btn-principal {
  max-width: 380px;
  padding: 15px 22px;
  border-radius: var(--raio-pill);
  background: var(--verde-principal);
  box-shadow: var(--sombra-2);
  color: var(--creme);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn-principal:hover { background: var(--verde-profundo); box-shadow: var(--sombra-3); }
.btn-principal:active { background: var(--verde-profundo); transform: scale(.98); }
.btn-desabilitado { background: var(--verde-principal) !important; color: var(--creme) !important; opacity: .45; }
.btn-voltar { color: var(--verde-principal); font-size: .93rem; font-weight: 700; }

/* Scanner */
#tela-scanner { background: var(--verde-profundo); }
.scanner-cabecalho {
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 16px;
  background: var(--verde-profundo);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.scanner-cabecalho .btn-voltar { color: var(--creme); }
.scanner-cabecalho h2 { color: var(--creme); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
#camera-video { background: var(--verde-profundo); }
.scanner-linha-guia { left: 13%; right: 13%; height: 3px; border-radius: var(--raio-pill); background: var(--amarelo-limao); box-shadow: none; }
.scanner-dica { bottom: calc(env(safe-area-inset-bottom, 0px) + 36px); background: rgba(248, 244, 233, .96); border-radius: var(--raio-pill); box-shadow: var(--sombra-2); color: var(--verde-profundo); font-size: .88rem; font-weight: 700; }

/* Carregamento */
#tela-carregando { background: var(--creme); }
.carregando-conteudo::before { content: ""; display: block; width: 72px; height: 72px; background: url("brand-assets/assets/logo-symbol.svg") no-repeat center / contain; animation: marca-pulsa 1.8s ease-in-out infinite; }
.carregando-texto { color: var(--verde-principal); font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 500; }
.spinner { display: none; }
@keyframes marca-pulsa { 0%, 100% { transform: translateY(0); opacity: .66; } 50% { transform: translateY(-4px); opacity: 1; } }

/* Confirmação */
#tela-confirmar, #tela-resultado { padding: calc(env(safe-area-inset-top, 0px) + 8px) 20px 28px; }
.cabecalho-tela { padding: 18px 0 18px; }
.cabecalho-tela h2, .resultado-cabecalho h2, .erro-conteudo h2 { color: var(--verde-principal); font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.produto-card, .resultado-nomes, .card-categoria { background: rgba(252, 250, 244, .94); border: 1px solid var(--borda-suave); box-shadow: var(--sombra-1); }
.produto-card { border-radius: var(--raio-g); margin-bottom: 22px; }
.produto-imagem { height: 210px; background: var(--creme); border-bottom-color: var(--borda-suave); }
.produto-info { padding: 20px; }
.produto-nome { color: var(--grafite-verde); font-size: 1.16rem; }
.produto-marca, .por100g, .nutriente-label, .aviso-sem-dados { color: var(--texto-secundario); }
.nutriente-item { background: var(--creme); border-color: var(--borda-suave); border-radius: var(--raio-s); }
.nutriente-valor { color: var(--verde-principal); font-variant-numeric: tabular-nums; }
.aviso-sem-dados { background: #FBEDC6; border-color: #E9C878; }

/* Resultado */
.resultado-cabecalho { padding: 18px 0 14px; }
.objetivo-tag { background: var(--verde-menta); color: var(--verde-profundo); border: 1px solid var(--verde-folha); border-radius: var(--raio-pill); font-size: .75rem; font-weight: 700; padding: 6px 10px; }
.card-vencedor-geral { background: var(--verde-principal); border: 0; border-radius: var(--raio-g); box-shadow: var(--sombra-2); padding: 20px; }
.card-vencedor-geral.empate { background: var(--creme-claro); border: 1px solid var(--borda-suave); }
.vg-badge { margin-bottom: 12px; background: var(--amarelo-limao); color: var(--verde-profundo); border-radius: var(--raio-pill); font-size: .74rem; font-weight: 800; }
.vg-nome { color: var(--creme); }
.vg-contagem { color: #C8D8CB; }
.card-vencedor-geral.empate .vg-titulo { color: var(--verde-principal); }
.card-vencedor-geral.empate .vg-subtitulo { color: var(--texto-secundario); }
.vg-ornamento { width: 42px; height: 42px; display: block; flex: 0 0 auto; background: url("brand-assets/assets/logo-symbol.svg") no-repeat center / contain; }
.vg-foto, .nome-foto { background: var(--creme); border-color: var(--borda-suave); }
.vg-foto-fallback, .nome-foto-fallback { background: var(--creme); border-color: var(--borda-suave); }
.vg-foto-fallback img, .nome-foto-fallback img { display: block; width: 72%; height: 72%; object-fit: contain; }
.resultado-nomes { border-radius: var(--raio-m); padding: 14px; }
.resultado-nome-letra { background: var(--verde-principal); border-radius: var(--raio-pill); }
.letra-b { background: var(--verde-folha); color: var(--verde-profundo); }
.resultado-nome-texto { color: var(--grafite-verde); }
.cards-categorias { gap: 12px; }
.card-categoria { border-radius: var(--raio-m); padding: 16px; }
.card-categoria.vence-a, .card-categoria.vence-b { border-color: var(--verde-principal); }
.card-categoria.cat-primaria { border-width: 2px; box-shadow: var(--sombra-1); }
.cat-primaria-label { background: var(--verde-menta); border: 0; border-radius: var(--raio-pill); color: var(--verde-profundo); font-size: .68rem; font-weight: 800; letter-spacing: .04em; padding: 5px 10px; }
.cat-header { margin-bottom: 10px; }
.cat-nome { color: var(--grafite-verde); font-size: .96rem; }
.cat-badge { border-radius: var(--raio-pill); font-size: .7rem; padding: 4px 8px; }
.badge-a { background: var(--verde-principal); color: var(--creme); }
.badge-b { background: var(--verde-folha); color: var(--verde-profundo); }
.badge-empate { background: var(--creme); color: var(--texto-secundario); border-color: var(--borda-suave); }
.cat-val { background: var(--creme); border-color: var(--borda-suave); border-radius: var(--raio-s); }
.cat-val-destaque, .cat-val-destaque-b { background: var(--verde-menta); border-color: var(--verde-folha); }
.cat-val-perdedor { background: var(--creme-claro); border-color: var(--borda-suave); }
.cat-val-perdedor .cat-num, .cat-num { color: var(--grafite-verde); font-variant-numeric: tabular-nums; }
.cat-val-destaque .cat-num, .cat-val-destaque-b .cat-num { color: var(--verde-principal); }
.cat-frase { color: var(--texto-secundario); font-style: normal; }

/* Erro e aviso de instalação */
.erro-icone { display: block; width: 76px; height: 76px; margin: 0 auto 20px; object-fit: contain; }
.erro-conteudo p { color: var(--texto-secundario); }
.aviso-instalar { background: var(--verde-profundo); border: 1px solid rgba(248, 244, 233, .18); border-radius: var(--raio-g); box-shadow: var(--sombra-3); color: var(--creme); }
.aviso-instalar button, .aviso-fechar, .aviso-passos li, .aviso-desktop { color: #C8D8CB; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}