/* =========================================================
   Lista de Compras Inteligente
   Identidade visual: Minha Família Saudável
   ========================================================= */
:root{
  /* --- paleta da marca --- */
  --navy:#201D3B;
  --navy-70:#514E6B;
  --navy-45:#8B889D;
  --verde:#A9CE4C;
  --verde-esc:#8CB32F;
  --verde-ink:#5C7A18;
  --verde-bg:#F1F8DE;
  --amarelo:#F8E44E;
  --amarelo-esc:#EBD127;
  --amarelo-ink:#87690A;
  --amarelo-bg:#FEF9DA;
  --coral:#E9583D;
  --coral-esc:#D34527;
  --coral-ink:#BC3A20;
  --coral-bg:#FDE9E4;
  --preto:#12101F;

  /* --- superfícies --- */
  --creme:#FFFCF2;
  --creme-2:#F6F1E3;
  --branco:#fff;
  --linha:#EBE5D5;

  /* --- forma --- */
  --r-xl:28px; --r-lg:22px; --r:16px; --r-sm:12px;
  --sombra:0 2px 0 rgba(32,29,59,.04), 0 10px 30px rgba(32,29,59,.07);
  --sombra-btn:0 4px 0 var(--btn-sombra, rgba(32,29,59,.18));
  --tab-h:70px;

  --f-display:'Fredoka','DM Sans',-apple-system,sans-serif;
  --f-texto:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-texto);color:var(--navy);background:var(--creme);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:16px;
  overscroll-behavior-y:none;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--coral-ink)}
::selection{background:var(--amarelo);color:var(--navy)}

.app{max-width:520px;margin:0 auto;min-height:100dvh;background:var(--creme);position:relative;
  box-shadow:0 0 60px rgba(32,29,59,.06)}

/* ---------- ilustrações ---------- */
.art{width:100%;height:auto;overflow:visible}
.art-deco{position:absolute;pointer-events:none;z-index:0}

/* ---------- logotipo (substituível por CONFIG.logoUrl) ---------- */
.logo{position:relative;display:inline-flex;flex-direction:column;align-items:center;
  line-height:.86;color:var(--logo-cor,var(--navy));padding:6px 10px 10px;isolation:isolate}
.logo__lua{position:absolute;left:50%;bottom:2px;translate:-50% 0;width:76%;aspect-ratio:2/1;
  background:var(--amarelo);border-radius:0 0 999px 999px;z-index:-1}
.logo__l1,.logo__l3{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72em}
.logo__l2{font-family:var(--f-display);font-weight:600;font-size:1.5em;letter-spacing:-.01em;
  font-style:italic;margin:.02em 0}
.logo--sem-lua{padding-bottom:2px}
/* Logotipo oficial (CONFIG.logoUrl). Precisa ter fundo transparente:
   o hero é navy, e um PNG com fundo branco apareceria como caixa branca. */
.logo--img{display:block;height:auto;width:100%;max-width:210px;margin:0 auto}
.hero .logo--img{max-width:230px}
.logo-wrap{display:flex;justify-content:center}

/* ---------- topo ---------- */
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:44px 1fr 44px;
  align-items:center;gap:4px;padding:calc(env(safe-area-inset-top) + 10px) 10px 10px;
  background:rgba(255,252,242,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
.topbar__back,.topbar__reset{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;color:var(--navy)}
.topbar__back:active,.topbar__reset:active{background:var(--creme-2)}
.topbar__back svg,.topbar__reset svg{width:22px;height:22px}
.topbar__title{font-family:var(--f-display);font-weight:600;font-size:1.05rem;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.screen{padding:18px 18px calc(var(--tab-h) + env(safe-area-inset-bottom) + 28px);outline:none;position:relative}
.screen--full{padding:0 0 calc(env(safe-area-inset-bottom) + 28px)}
.screen--full > *:not(.hero){margin-left:18px;margin-right:18px}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.12;margin:0;letter-spacing:-.01em}
h1{font-size:2rem}
h2{font-size:1.35rem;margin-bottom:6px}
h3{font-size:1.05rem}
p{margin:.5em 0}
.lead{color:var(--navy-70);font-size:1.02rem}
.eyebrow{font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral-ink)}
.muted{color:var(--navy-70);font-size:.87rem}
.center{text-align:center}
mark{background:linear-gradient(transparent 58%,var(--amarelo) 58%);color:inherit;padding:0 2px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;padding:calc(env(safe-area-inset-top) + 22px) 22px 34px;
  border-radius:0 0 var(--r-xl) var(--r-xl);overflow:hidden;text-align:center}
.hero__conteudo{position:relative;z-index:2}
.hero .logo{font-size:1.45rem;margin-bottom:6px}
.hero h1{color:var(--amarelo);font-size:2.05rem;margin:14px 0 10px;text-wrap:balance}
.hero p{color:#D6D3E4;margin:0 auto;max-width:30ch;font-size:.98rem}
.hero .art-deco{opacity:1}
.hero__f1{width:66px;left:-18px;top:88px;rotate:-16deg}
.hero__f2{width:66px;right:-12px;top:52px;rotate:16deg}
.hero__f3{width:52px;right:16px;bottom:-14px;rotate:-8deg}
.hero__f4{width:46px;left:18px;bottom:-10px;rotate:12deg}

/* ---------- citação ---------- */
.quote{position:relative;margin:22px 0;padding:22px 76px 22px 24px;border-radius:var(--r-lg);
  background:var(--verde-bg);font-family:var(--f-display);font-weight:500;font-size:1.08rem;
  line-height:1.32;color:var(--verde-ink);overflow:hidden}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--verde)}
.quote .art-deco{width:78px;right:-24px;bottom:-24px;rotate:-14deg;opacity:.9}

/* ---------- passos ---------- */
.steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:start;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);padding:14px 16px}
.steps > li > b{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;
  font-family:var(--f-display);font-size:.9rem;font-weight:600;color:var(--navy)}
.steps > li:nth-child(1) > b{background:var(--verde)}
.steps > li:nth-child(2) > b{background:var(--amarelo)}
.steps > li:nth-child(3) > b{background:var(--coral);color:#fff}
.steps > li:nth-child(4) > b{background:var(--navy);color:var(--amarelo)}
.steps span{font-size:.94rem;font-weight:600}
.steps span strong{font-weight:800;color:var(--coral-ink)}
.steps small{display:block;color:var(--navy-70);font-size:.84rem;font-weight:400;margin-top:1px}

/* ---------- cards ---------- */
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sombra)}
.card + .card{margin-top:12px}
.section{margin-top:26px}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.section__head h2{display:flex;align-items:center;gap:8px}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 20px;border-radius:999px;font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  background:var(--coral);color:#fff;--btn-sombra:var(--coral-esc);box-shadow:var(--sombra-btn);
  text-decoration:none;text-align:center;
  transition:transform .1s ease,box-shadow .1s ease}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-sombra)}
.btn--navy{background:var(--navy);color:var(--amarelo);--btn-sombra:#0F0D1F}
.btn--verde{background:var(--verde);color:var(--navy);--btn-sombra:var(--verde-esc)}
.btn--amarelo{background:var(--amarelo);color:var(--navy);--btn-sombra:var(--amarelo-esc)}
.btn--ghost{background:transparent;color:var(--navy);border:2px solid var(--navy);box-shadow:none}
.btn--ghost:active{transform:scale(.98);box-shadow:none}
.btn--wpp{background:#25D366;color:#08301A;--btn-sombra:#1AA34C}
.btn--sm{padding:11px 16px;font-size:.9rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-row{display:grid;gap:11px;margin-top:16px}
.btn-row--2{grid-template-columns:1fr 1fr}

/* ---------- campos ---------- */
.field{margin-top:18px}
.field > label{display:block;font-family:var(--f-display);font-weight:600;font-size:1rem;margin-bottom:2px}
.field small{display:block;color:var(--navy-70);font-size:.84rem;margin-bottom:10px}
.input{width:100%;padding:13px 16px;border:2px solid var(--linha);border-radius:14px;background:var(--branco)}
.input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px var(--verde-bg)}

.stepper{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:10px;
  background:var(--creme);border:2px solid var(--linha);border-radius:18px;padding:8px}
.stepper button{width:54px;height:48px;border-radius:14px;background:var(--branco);border:2px solid var(--linha);
  font-size:1.4rem;font-weight:700;color:var(--navy);line-height:1}
.stepper button:active{background:var(--amarelo);border-color:var(--amarelo)}
.stepper output{text-align:center;font-family:var(--f-display);font-size:1.75rem;font-weight:600;line-height:1.1}
.stepper output small{display:block;font-family:var(--f-texto);font-size:.75rem;font-weight:600;color:var(--navy-70);letter-spacing:.02em}

/* ---------- grupos ---------- */
.g-natura{--c:var(--verde);--ci:var(--verde-ink);--cbg:var(--verde-bg);--con:var(--navy)}
.g-minimamente{--c:var(--amarelo);--ci:var(--amarelo-ink);--cbg:var(--amarelo-bg);--con:var(--navy)}
.g-processados{--c:var(--coral);--ci:var(--coral-ink);--cbg:var(--coral-bg);--con:#fff}
.g-ultra{--c:var(--navy);--ci:var(--navy);--cbg:#ECEAF1;--con:var(--amarelo)}

.meta{border-radius:var(--r-lg);border:1px solid var(--linha);background:var(--branco);padding:16px;margin-top:11px}
.meta__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.meta__nome{display:flex;align-items:center;gap:9px;font-family:var(--f-display);font-weight:600;font-size:1rem}
.dot{width:13px;height:13px;border-radius:999px;background:var(--c);flex:none;box-shadow:0 0 0 3px var(--cbg)}
.meta__num{font-family:var(--f-display);font-size:.95rem;font-weight:500;white-space:nowrap;color:var(--navy-70)}
.meta__num b{color:var(--ci);font-size:1.22rem;font-weight:600}
.bar{height:12px;border-radius:999px;background:var(--creme-2);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--c);transition:width .35s cubic-bezier(.3,1.2,.5,1)}
.bar--over i{background:repeating-linear-gradient(45deg,var(--coral),var(--coral) 7px,#fff 7px,#fff 14px)}
.meta__foot{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:.82rem;color:var(--navy-70)}
.meta__foot .alerta{color:var(--coral-ink);font-weight:800}
.meta__foot .ok{color:var(--verde-ink);font-weight:800}

/* ---------- abas de grupo ---------- */
.gtabs{display:flex;gap:7px;overflow-x:auto;padding:2px 18px 12px;margin:0 -18px;scrollbar-width:none}
.gtabs::-webkit-scrollbar{display:none}
.gtab{flex:none;padding:10px 15px;border-radius:999px;background:var(--branco);border:2px solid var(--linha);
  font-family:var(--f-display);font-size:.88rem;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:8px;color:var(--navy)}
.gtab[aria-selected="true"]{background:var(--c);border-color:var(--c);color:var(--con)}
.gtab .badge{background:var(--creme-2);border-radius:999px;padding:0 8px;font-size:.76rem;font-weight:600;min-width:22px;text-align:center}
.gtab[aria-selected="true"] .badge{background:rgba(255,255,255,.35);color:var(--con)}
.g-ultra .gtab[aria-selected="true"] .badge{background:rgba(255,255,255,.16)}

.search{position:relative;margin:14px 0 4px}
.search input{padding-left:44px}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--navy-45)}

.sub{margin-top:20px}
.sub__h{font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--navy-45);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.sub__h::after{content:"";flex:1;height:2px;background:var(--linha);border-radius:2px}
.itens{display:flex;flex-wrap:wrap;gap:8px}
.item{padding:10px 15px;border-radius:999px;background:var(--branco);border:2px solid var(--linha);
  font-size:.9rem;font-weight:600;text-align:left;display:flex;align-items:center;gap:7px;
  color:var(--navy);transition:transform .1s}
.item:active{transform:scale(.95)}
.item[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--con)}
.item .tick{width:15px;height:15px;flex:none;opacity:0;margin-left:-4px;transition:opacity .12s}
.item[aria-pressed="true"] .tick{opacity:1;margin-left:0}

.addbox{display:flex;gap:8px;margin-top:16px}
.addbox .input{flex:1}
.addbox .btn{width:auto;flex:none}

/* ---------- tabbar ---------- */
.tabbar{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,252,242,.95);backdrop-filter:blur(12px);border-top:1px solid var(--linha);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:grid;place-items:center;gap:3px;padding:10px 4px 9px;text-decoration:none;
  color:var(--navy-45);font-size:.69rem;font-weight:700;position:relative}
.tabbar a svg{width:23px;height:23px}
.tabbar a[aria-current="page"]{color:var(--navy)}
.tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:34px;height:4px;border-radius:0 0 4px 4px;background:var(--coral)}

/* ---------- resultado ---------- */
.selo{position:relative;text-align:center;padding:26px 18px 24px;border-radius:var(--r-xl);
  background:var(--navy);color:#fff;overflow:hidden}
.selo__lua{position:absolute;left:50%;top:8px;translate:-50% 0;width:190px;height:95px;
  background:var(--amarelo);border-radius:0 0 999px 999px}
.selo__in{position:relative;z-index:2}
.selo__nota{font-family:var(--f-display);font-size:3.6rem;line-height:1;font-weight:600;color:var(--navy)}
.selo__nota span{font-size:1.1rem;opacity:.5}
.selo h2{color:var(--amarelo);margin-top:12px}
.selo p{color:#D6D3E4;font-size:.92rem;margin:6px auto 0;max-width:32ch}
.selo .art-deco{width:54px;opacity:.95}
.selo__a1{left:-16px;bottom:-18px;rotate:-20deg}
.selo__a2{right:-16px;top:-14px;rotate:18deg;width:46px}

.donut{display:block;margin:4px auto 0}
.legend{display:grid;gap:9px;margin-top:16px}
.legend div{display:grid;grid-template-columns:16px 1fr auto auto;gap:11px;align-items:center;font-size:.92rem;font-weight:600}
.legend .pct{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ci)}
.legend .alvo{color:var(--navy-45);font-size:.8rem;font-weight:600}

.tabela{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:10px}
.tabela th,.tabela td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--linha)}
.tabela th{font-family:var(--f-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy-70);font-weight:600}
.tabela td:first-child,.tabela th:first-child{text-align:left;font-weight:700}
.tabela tr[data-atual="1"]{background:var(--amarelo-bg)}
.tabela tr[data-atual="1"] td:first-child{position:relative}
.tabela-wrap{overflow-x:auto;margin:0 -18px;padding:0 18px}

.lista-final h3{display:flex;align-items:center;gap:9px;margin:16px 0 8px}
.lista-final ul{margin:0;padding-left:20px;font-size:.9rem;columns:2;column-gap:18px}
.lista-final li{margin-bottom:4px;break-inside:avoid}
.lista-final li::marker{color:var(--c)}

/* ---------- calculadora ---------- */
.calc-row{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r-lg);padding:16px;margin-top:11px}
.calc-row__h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calc-row__grid{display:grid;grid-template-columns:1fr 74px 74px;gap:8px;align-items:end;margin-top:10px}
.calc-row__grid label{font-size:.72rem;color:var(--navy-45);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;display:block;margin-bottom:5px}
.calc-row__res{margin-top:14px;padding-top:13px;border-top:2px dashed var(--linha);
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.calc-row__res b{font-family:var(--f-display);font-size:1.6rem;font-weight:600;color:var(--coral-ink)}
.calc-del{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  background:var(--creme-2);color:var(--navy-70);font-size:.75rem;font-weight:700;flex:none}
.calc-del:active{background:var(--coral-bg);color:var(--coral-ink)}
.calc-row__grid .input{padding:12px 12px}
.calc-row__grid input[type=number]{text-align:center;padding-left:4px;padding-right:4px}
.calc-row__grid input[type=number]::-webkit-outer-spin-button,
.calc-row__grid input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- lead ---------- */
.lead-card{position:relative;background:var(--verde);color:var(--navy);border-radius:var(--r-xl);
  padding:24px 20px;margin-top:24px;overflow:hidden}
.lead-card h2{color:var(--navy)}
.lead-card p{color:#3D4A1E;font-size:.93rem}
.lead-card .input{background:#fff;border-color:transparent;margin-top:9px}
.lead-card .input:focus{border-color:var(--navy);box-shadow:none}
.lead-card .btn{margin-top:13px;background:var(--navy);color:var(--amarelo);--btn-sombra:#0F0D1F}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.consents{margin-top:16px;display:grid;gap:12px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;line-height:1.4;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--navy)}
.consent input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.consent a{color:inherit;font-weight:800;text-decoration:underline}
.lead-card--final .consent{color:#D6D3E4}
.lead-card .skip{display:block;width:100%;text-align:center;margin-top:12px;color:#4E6118;
  font-size:.85rem;font-weight:700;text-decoration:underline}
.lead-card{padding-top:34px}
.lead-card .art-deco{width:86px;right:-18px;top:-24px;rotate:14deg}
.lead-card--final{background:var(--navy)}
.lead-card--final h2{color:var(--amarelo)}
.lead-card--final p{color:#D6D3E4}
.lead-card--final .btn{background:var(--coral);color:#fff;--btn-sombra:var(--coral-esc)}
/* o verde do WhatsApp precisa vencer as regras acima, que são mais específicas que .btn--wpp */
.lead-card .btn--wpp,
.lead-card--final .btn--wpp{background:#25D366;color:#08301A;--btn-sombra:#1AA34C}

/* ---------- toast / sheet ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 22px);transform:translate(-50%,20px);
  background:var(--navy);color:var(--amarelo);padding:12px 20px;border-radius:999px;
  font-family:var(--f-display);font-size:.9rem;font-weight:500;
  opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.sheet{position:fixed;inset:0;z-index:70}
.sheet__backdrop{position:absolute;inset:0;background:rgba(32,29,59,.5)}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--creme);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:26px 20px calc(env(safe-area-inset-bottom) + 24px);
  max-height:88dvh;overflow:auto;animation:up .3s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}}
.sheet__close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:999px;
  font-size:1.4rem;color:var(--navy);background:var(--creme-2);display:grid;place-items:center;line-height:1}

.kv{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.kv li{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;padding-bottom:10px;
  border-bottom:1px solid var(--linha);font-weight:600}
.kv b{font-family:var(--f-display);font-weight:600;white-space:nowrap;color:var(--coral-ink)}
.kv small{display:block;color:var(--navy-70);font-weight:400;font-size:.8rem;margin-top:3px}

.aviso{font-size:.78rem;color:var(--navy-45);margin-top:22px;line-height:1.5}
.creditos{margin-top:28px;padding:18px 0 4px;border-top:1px solid var(--linha);
  text-align:center;font-size:.82rem;font-weight:600;color:var(--navy-45)}
.creditos a{color:var(--navy-70);text-decoration:none;
  border-bottom:2px solid var(--verde);padding-bottom:1px}
.creditos a:active{color:var(--verde-ink)}

.faixa{display:flex;align-items:center;gap:12px;background:var(--amarelo-bg);border-radius:var(--r-lg);
  padding:14px 16px;margin-top:16px;font-size:.86rem;color:var(--navy-70);font-weight:600}
.faixa .art{width:38px;flex:none}

@media print{
  .topbar,.tabbar,.btn-row,.lead-card,.toast,.art-deco,.selo .art-deco{display:none!important}
  .app{box-shadow:none;max-width:none}
  body{background:#fff}
  .selo{background:#fff;color:var(--navy);border:2px solid var(--navy)}
  .selo h2{color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}