@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ─── Reset & Root ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --g950: #091c14;  --g900: #122a1f;  --g800: #1e4d3b;
  --g700: #2d6e54;  --g600: #3d8a68;  --g500: #52a87e;
  --g400: #79c4a0;  --g200: #c5ebd8;  --g100: #e8f7f0;  --g50:  #f2faf6;

  --a700: #9a5f08;  --a600: #c4831a;  --a400: #e8b040;  --a100: #fef3cd;

  --r600: #c0392b;  --r100: #fde8e6;
  --y600: #b45309;  --y100: #fef9eb;

  --n950: #0c0c0a;  --n900: #1a1a18;  --n700: #3a3a35;
  --n500: #6b6b60;  --n400: #8a8a7e;  --n300: #b0afa3;
  --n200: #d4d3cc;  --n150: #e2e0d8;  --n100: #eceae3;
  --n50:  #f6f4ef;  --n20:  #faf8f3;

  --bg:       #f3f0e6;
  --surface:  #ffffff;
  --surf2:    #faf8f3;
  --primary:  var(--g800);
  --prim-dk:  var(--g900);
  --prim-lt:  var(--g700);
  --accent:   var(--a600);
  --text:     var(--n900);
  --text2:    var(--n500);
  --text3:    var(--n300);
  --border:   var(--n150);
  --safe:     var(--g600);
  --caution:  var(--a600);
  --danger:   var(--r600);

  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --r-sm:   8px;   --r:    12px;   --r-lg:  16px;
  --r-xl:  24px;   --r-2xl: 32px;  --r-full: 9999px;

  --sh-sm: 0 1px 3px rgba(0,0,0,.06);
  --sh:    0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sh-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --sh-xl: 0 20px 60px rgba(0,0,0,.16), 0 4px 16px rgba(0,0,0,.08);

  --nav-h: 68px;
  --hdr-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

/* ─── Base ─────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow: hidden;
  height: 100dvh;
  height: 100vh;
}
img { display: block; max-width: 100%; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }

/* ─── Loading Screen ────────────────────────────────── */
#loading-screen {
  position: fixed; inset: 0;
  background: var(--g900);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
  z-index: 9999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loading-logo {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  animation: loadPulse 1.6s ease-in-out infinite;
}
.loading-logo svg { width: 64px; height: 64px; }
.loading-logo span {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.loading-bar {
  width: 120px; height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 8px;
}
.loading-bar-fill {
  height: 100%; width: 40%;
  background: var(--g400);
  border-radius: var(--r-full);
  animation: loadBar 1.2s ease-in-out infinite;
}
@keyframes loadPulse { 0%,100%{opacity:.7} 50%{opacity:1} }
@keyframes loadBar { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* ─── App Shell ─────────────────────────────────────── */
#app-shell {
  display: flex; flex-direction: column;
  height: 100dvh; height: 100vh;
  overflow: hidden;
}

/* ─── Header ────────────────────────────────────────── */
#app-header {
  flex-shrink: 0;
  background: var(--g900);
  padding-top: var(--safe-top);
  z-index: 100;
}
.header-inner {
  height: var(--hdr-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.header-logo {
  display: flex; align-items: center; gap: 10px;
}
.header-logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.header-logo span {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8);
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover, .icon-btn:active { background: rgba(255,255,255,.12); color: #fff; }
.icon-btn svg { width: 22px; height: 22px; }

/* Search Bar */
.search-wrap {
  padding: 0 12px 10px;
}
.search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: var(--r-full);
  padding: 0 16px;
  height: 42px;
  transition: background .2s ease, border-color .2s ease;
}
.search-input-wrap:focus-within {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.search-input-wrap svg { width: 18px; height: 18px; color: rgba(255,255,255,.6); flex-shrink: 0; }
#search-input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-size: 15px;
  placeholder-color: rgba(255,255,255,.5);
}
#search-input::placeholder { color: rgba(255,255,255,.5); }
#search-clear {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.6); padding: 2px;
  display: none;
  transition: color .15s;
}
#search-clear:hover { color: #fff; }
#search-clear.visible { display: flex; }
#search-clear svg { width: 16px; height: 16px; }

/* ─── Main Content ──────────────────────────────────── */
#main-content {
  flex: 1; overflow: hidden; position: relative;
}
.page {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  padding-bottom: calc(var(--nav-h) + var(--safe-bot) + 8px);
}
.page.active {
  opacity: 1; transform: none;
  pointer-events: all;
}

/* ─── Bottom Navigation ──────────────────────────────── */
#bottom-nav {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  padding-bottom: var(--safe-bot);
  height: calc(var(--nav-h) + var(--safe-bot));
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  z-index: 100;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 8px 4px 10px;
  color: var(--n400);
  font-size: 11px; font-weight: 500;
  transition: color .2s ease;
  position: relative;
}
.nav-item svg { width: 22px; height: 22px; transition: transform .2s var(--ease-spring, ease); }
.nav-item.active { color: var(--primary); }
.nav-item.active svg { transform: scale(1.1); }
.nav-item::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
  transition: width .25s ease;
}
.nav-item.active::after { width: 32px; }

/* ─── Page: Início ──────────────────────────────────── */
.home-hero {
  background: linear-gradient(160deg, var(--g900) 0%, var(--g800) 60%, var(--g700) 100%);
  padding: 28px 20px 32px;
  position: relative; overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-greeting {
  font-size: 13px; color: var(--g400); font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}
.hero-title {
  font-family: var(--ff-display);
  font-size: 28px; font-weight: 700; color: #fff;
  line-height: 1.15; margin-bottom: 8px; letter-spacing: -0.5px;
}
.hero-sub {
  font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.5;
}
.home-stats {
  display: flex; gap: 12px; margin-top: 20px;
}
.stat-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-full);
  padding: 6px 14px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9);
  display: flex; align-items: center; gap: 6px;
}
.stat-pill span { color: var(--g400); }

.home-section { padding: 20px 16px 0; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--ff-display);
  font-size: 18px; font-weight: 700;
  color: var(--text); letter-spacing: -0.3px;
}
.section-link {
  font-size: 13px; font-weight: 500; color: var(--primary);
}

/* Category Pills */
.cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-pill {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  padding: 7px 16px;
  font-size: 13px; font-weight: 500;
  color: var(--text2);
  transition: all .15s ease; cursor: pointer;
  white-space: nowrap;
}
.cat-pill:hover, .cat-pill.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* Quick-tip */
.tip-card {
  background: var(--a100);
  border: 1px solid rgba(196,131,26,.25);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.tip-icon { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
.tip-body { flex: 1; }
.tip-label {
  font-size: 11px; font-weight: 600; color: var(--a700);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px;
}
.tip-text { font-size: 14px; color: var(--n700); line-height: 1.5; }

/* ─── Food Cards Grid ───────────────────────────────── */
.foods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 16px;
}
.food-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
.food-card:active { transform: scale(.97); box-shadow: var(--sh-sm); }

.food-card-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  background: var(--g50);
}
.food-card-emoji {
  width: 100%; aspect-ratio: 4/3;
  background: var(--g50);
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
}
.food-card-body { padding: 10px 12px 12px; flex: 1; }
.food-card-name {
  font-size: 14px; font-weight: 600;
  color: var(--text); line-height: 1.25; margin-bottom: 4px;
}
.food-card-cat {
  font-size: 11px; font-weight: 500;
  color: var(--primary);
  background: var(--g100);
  display: inline-block; padding: 2px 8px;
  border-radius: var(--r-full);
}

/* ─── Alimentos Page ────────────────────────────────── */
.page-toolbar {
  padding: 12px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.filter-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
  flex-shrink: 0;
  background: var(--n50); border: 1.5px solid var(--border);
  border-radius: var(--r-full); padding: 6px 14px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.results-count {
  padding: 10px 16px;
  font-size: 13px; color: var(--text2);
}

/* No results */
.empty-state {
  text-align: center; padding: 60px 24px;
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-family: var(--ff-display); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.empty-state p { font-size: 15px; color: var(--text2); line-height: 1.5; }

/* ─── Aditivos Page ─────────────────────────────────── */
.aditivos-list { padding: 8px 0; }
.aditivo-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  transition: background .15s ease;
}
.aditivo-item:first-child { border-top: 1px solid var(--border); }
.aditivo-item:hover, .aditivo-item:active { background: var(--surf2); }

.aditivo-code {
  flex-shrink: 0; width: 54px;
  background: var(--g100); color: var(--primary);
  border-radius: var(--r-sm); padding: 6px 4px;
  text-align: center;
  font-size: 12px; font-weight: 700; font-family: monospace;
  line-height: 1.2;
}
.aditivo-info { flex: 1; min-width: 0; }
.aditivo-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aditivo-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap;
}
.aditivo-cat {
  font-size: 12px; color: var(--text2); font-weight: 400;
}
.safety-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-full);
}
.safety-safe    { background: var(--g100); color: var(--g700); }
.safety-caution { background: var(--y100); color: var(--y600); }
.safety-danger  { background: var(--r100); color: var(--r600); }
.aditivo-arrow { color: var(--n300); flex-shrink: 0; }
.aditivo-arrow svg { width: 16px; height: 16px; }

/* ─── Aprender Page ─────────────────────────────────── */
.aprender-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 16px;
}
.topic-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 16px 14px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.topic-card:active { transform: scale(.97); }
.topic-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.topic-card-title {
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3;
}
.topic-card-sub {
  font-size: 12px; color: var(--text2); margin-top: -6px;
}

/* Topic icon colors */
.ti-green  { background: var(--g100); }
.ti-amber  { background: var(--a100); }
.ti-red    { background: var(--r100); }
.ti-blue   { background: #dbeafe; }
.ti-purple { background: #ede9fe; }
.ti-pink   { background: #fce7f3; }
.ti-teal   { background: #ccfbf1; }
.ti-orange { background: #ffedd5; }

/* ─── Guias Page ────────────────────────────────────── */
.guias-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.guia-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; align-items: center; gap: 14px;
}
.guia-card:active { transform: scale(.98); }
.guia-icon { font-size: 32px; flex-shrink: 0; }
.guia-body { flex: 1; min-width: 0; }
.guia-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.guia-desc { font-size: 13px; color: var(--text2); line-height: 1.4; }
.guia-arrow { color: var(--n300); flex-shrink: 0; }
.guia-arrow svg { width: 18px; height: 18px; }

/* ─── Modal ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 500;
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-overlay.visible { opacity: 1; pointer-events: all; }

.modal {
  background: var(--surface);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  width: 100%;
  max-height: 92dvh; max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.34,1.3,.64,1);
  padding-bottom: var(--safe-bot);
}
.modal-overlay.visible .modal { transform: translateY(0); }

.modal-handle {
  width: 36px; height: 4px;
  background: var(--n200); border-radius: var(--r-full);
  margin: 10px auto 0;
  flex-shrink: 0;
}
.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-back-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2); flex-shrink: 0;
  transition: background .15s ease;
}
.modal-back-btn:hover { background: var(--n50); color: var(--text); }
.modal-back-btn svg { width: 20px; height: 20px; }
.modal-title {
  flex: 1;
  font-family: var(--ff-display);
  font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ─── Food Detail Modal ─────────────────────────────── */
.food-detail-hero {
  position: relative; height: 220px; background: var(--g50);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.food-detail-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.food-detail-emoji-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 80px;
  background: linear-gradient(135deg, var(--g50), var(--g100));
}
.food-detail-cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,.45); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.food-detail-wiki-btn {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0,0,0,.45); color: rgba(255,255,255,.9);
  font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 5px;
}
.food-detail-wiki-btn svg { width: 14px; height: 14px; }

.detail-section { padding: 16px; border-bottom: 1px solid var(--border); }
.detail-section:last-child { border-bottom: none; }
.detail-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.detail-section-title svg { width: 16px; height: 16px; }

.nutrient-text { font-size: 15px; color: var(--text); line-height: 1.6; }

.benefit-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.benefit-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--text); line-height: 1.5;
}
.benefit-item::before {
  content: '✓';
  flex-shrink: 0; width: 20px; height: 20px;
  background: var(--g100); color: var(--g700);
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
}

.tip-box {
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: var(--r); padding: 14px 16px;
  font-size: 15px; color: var(--text); line-height: 1.6;
}

/* ─── Aditivo Detail Modal ──────────────────────────── */
.aditivo-detail-header {
  background: var(--g900); padding: 20px 16px;
  display: flex; align-items: center; gap: 14px;
}
.aditivo-detail-code {
  background: rgba(255,255,255,.15);
  color: #fff; font-size: 20px; font-weight: 800;
  font-family: monospace; padding: 10px 16px;
  border-radius: var(--r); text-align: center; min-width: 80px;
}
.aditivo-detail-meta { flex: 1; }
.aditivo-detail-name {
  font-size: 17px; font-weight: 600; color: #fff;
  margin-bottom: 4px; line-height: 1.3;
}
.aditivo-detail-cat {
  font-size: 13px; color: rgba(255,255,255,.65);
}
.aditivo-safety-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--surf2);
  border-bottom: 1px solid var(--border);
}
.aditivo-safety-label { font-size: 13px; color: var(--text2); flex-shrink: 0; }
.aditivo-safety-val {
  font-size: 13px; font-weight: 600; flex: 1;
}
.safe-text    { color: var(--safe); }
.caution-text { color: var(--caution); }
.danger-text  { color: var(--danger); }

.detail-row {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-row-label {
  font-size: 12px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 5px;
}
.detail-row-value { font-size: 15px; color: var(--text); line-height: 1.5; }
.detail-row-value.mono { font-family: monospace; font-size: 14px; }

.veg-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.veg-badge {
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
}
.veg-yes  { background: var(--g100); color: var(--g700); }
.veg-no   { background: var(--r100); color: var(--r600); }
.veg-dep  { background: var(--y100); color: var(--y600); }

/* ─── Content (Aprender/Guias) Modals ───────────────── */
.content-hero {
  padding: 24px 20px;
  background: linear-gradient(135deg, var(--g800), var(--g700));
  display: flex; align-items: center; gap: 16px;
}
.content-hero-icon { font-size: 40px; }
.content-hero-body { }
.content-hero-title {
  font-family: var(--ff-display);
  font-size: 22px; font-weight: 700; color: #fff;
  line-height: 1.2; margin-bottom: 4px;
}
.content-hero-sub { font-size: 14px; color: rgba(255,255,255,.7); }

.content-block { padding: 20px 16px; border-bottom: 1px solid var(--border); }
.content-block:last-child { border-bottom: none; }
.content-block-title {
  font-family: var(--ff-display);
  font-size: 17px; font-weight: 700; color: var(--text);
  margin-bottom: 10px; letter-spacing: -0.2px;
}
.content-block p {
  font-size: 15px; color: var(--text); line-height: 1.65;
  margin-bottom: 10px;
}
.content-block p:last-child { margin-bottom: 0; }

.content-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.content-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; color: var(--text); line-height: 1.5;
}
.content-list li::before {
  content: '•'; color: var(--primary);
  font-size: 18px; line-height: 1.2; flex-shrink: 0;
}

.callout {
  border-radius: var(--r); padding: 12px 16px; margin: 12px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.callout-green  { background: var(--g100); border-left: 3px solid var(--g600); }
.callout-amber  { background: var(--a100); border-left: 3px solid var(--accent); }
.callout-red    { background: var(--r100); border-left: 3px solid var(--r600); }
.callout-icon   { font-size: 18px; flex-shrink: 0; line-height: 1.4; }
.callout p      { font-size: 14px; color: var(--n700); line-height: 1.55; margin: 0; }

.comparison-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  margin-top: 8px;
}
.comparison-table th {
  background: var(--g800); color: #fff;
  padding: 8px 10px; text-align: left; font-weight: 600;
}
.comparison-table th:first-child { border-radius: var(--r-sm) 0 0 0; }
.comparison-table th:last-child  { border-radius: 0 var(--r-sm) 0 0; }
.comparison-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top; color: var(--text);
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:nth-child(even) td { background: var(--surf2); }
.comparison-table td:first-child { font-weight: 600; color: var(--primary); }
.td-good  { color: var(--safe); font-weight: 600; }
.td-bad   { color: var(--danger); font-weight: 600; }
.td-ok    { color: var(--caution); font-weight: 600; }

/* ─── Vitaminas / Minerais Cards ─────────────────────── */
.vitmin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 12px 16px;
}
.vitmin-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 12px;
  cursor: pointer; transition: transform .15s ease;
}
.vitmin-card:active { transform: scale(.97); }
.vitmin-card-letter {
  font-family: var(--ff-display);
  font-size: 24px; font-weight: 700; color: var(--primary);
  margin-bottom: 2px;
}
.vitmin-card-name { font-size: 13px; font-weight: 500; color: var(--text2); }

/* ─── Shared Utilities ──────────────────────────────── */
.mt-0 { margin-top: 0; }    .mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }  .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600;
}
.badge-green  { background: var(--g100); color: var(--g700); }
.badge-amber  { background: var(--a100); color: var(--a700); }
.badge-red    { background: var(--r100); color: var(--r600); }
.badge-gray   { background: var(--n100); color: var(--n700); }

.divider {
  height: 8px; background: var(--n50);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n200); border-radius: 4px; }

/* ─── Animations ────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp .3s ease both; }
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .10s; }
.delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .20s; }

/* ─── Responsive ─────────────────────────────────────── */
@media (min-width: 480px) {
  .foods-grid { grid-template-columns: repeat(3, 1fr); }
  .aprender-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
  .foods-grid { grid-template-columns: repeat(4, 1fr); }
  .modal { max-width: 500px; margin: auto; border-radius: var(--r-2xl); }
  .modal-overlay { align-items: center; }
}