/* ===== Design tokens — ZakariA ===== */
:root, [data-theme="light"] {
  --zakaria-laranja: #fc7e41;
  --zakaria-azul: #3977f5;
  --zakaria-verde: #44ba80;
  --zakaria-amarelo: #feca39;
  --zakaria-preto: #353535;
  --zakaria-cinza: #ededed;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-full: 9999px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-6: 48px;
}

/* ===== Componentes compilados (equivalentes estáticos dos componentes React do design system) ===== */

/* Badge numerado */
.zk-badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 14px; color: #fff;
}
.zk-badge-num-laranja { background: var(--zakaria-laranja); }
.zk-badge-num-azul { background: var(--zakaria-azul); }
.zk-badge-num-verde { background: var(--zakaria-verde); }
.zk-badge-num-amarelo { background: var(--zakaria-amarelo); color: var(--zakaria-preto); }

/* Ícone circular de categoria */
.zk-icone-cat {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  color: #fff; flex: none;
}
.zk-icone-cat svg, .zk-icone-cat img { width: 22px; height: 22px; }
.zk-icone-cat-laranja { background: var(--zakaria-laranja); }
.zk-icone-cat-azul { background: var(--zakaria-azul); }
.zk-icone-cat-verde { background: var(--zakaria-verde); }
.zk-icone-cat-amarelo { background: var(--zakaria-amarelo); color: var(--zakaria-preto); }

/* Balão de conversa */
.zk-balao {
  display: inline-block; max-width: 320px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); font-size: 14px; line-height: 1.5;
}
.zk-balao-lojista { background: #dcf8c6; color: var(--zakaria-preto); border-bottom-right-radius: 4px; }
.zk-balao-zaka { background: #ffffff; color: var(--zakaria-preto); border: 1px solid var(--zakaria-cinza); border-bottom-left-radius: 4px; }

/* Tag / etiqueta de destaque */
.zk-tag {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.zk-tag-outlined { background: transparent; border: 1.5px solid currentColor; }
.zk-tag-preenchida { border: none; color: #fff; }
.zk-tag-laranja.zk-tag-outlined { color: var(--zakaria-laranja); }
.zk-tag-laranja.zk-tag-preenchida { background: var(--zakaria-laranja); }
.zk-tag-azul.zk-tag-outlined { color: var(--zakaria-azul); }
.zk-tag-azul.zk-tag-preenchida { background: var(--zakaria-azul); }
.zk-tag-verde.zk-tag-outlined { color: var(--zakaria-verde); }
.zk-tag-verde.zk-tag-preenchida { background: var(--zakaria-verde); }
.zk-tag-amarelo.zk-tag-outlined { color: #b8860b; }
.zk-tag-amarelo.zk-tag-preenchida { background: var(--zakaria-amarelo); color: var(--zakaria-preto); }

/* Card de comparação */
.zk-card-comp {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-sm);
}
.zk-card-comp-negativo { background: #fff3ec; }
.zk-card-comp-positivo { background: #eaf9f1; }
.zk-card-comp-marca {
  flex: none; width: 22px; height: 22px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; margin-top: 2px;
}
.zk-card-comp-marca-negativo { background: var(--zakaria-laranja); }
.zk-card-comp-marca-positivo { background: var(--zakaria-verde); }
.zk-card-comp-titulo { font-weight: 700; font-size: 14px; color: var(--zakaria-preto); }
.zk-card-comp-desc { font-size: 13px; color: #666; margin-top: 4px; line-height: 1.5; }

/* ===== Base da página ===== */
body { margin: 0; font-family: 'Red Hat Display', system-ui, sans-serif; }
a { color: var(--zakaria-azul); text-decoration: underline; }
a:hover { color: #2c5cd1; }
input:focus { outline: 2px solid var(--zakaria-verde); outline-offset: 1px; }
html { overflow-x: hidden; }

/* ===== Responsivo =====
   Como a página usa muito style="" inline (herdado do protótipo), as regras
   abaixo usam !important onde precisam vencer o inline — é o jeito padrão de
   aplicar responsividade sobre markup com estilos inline sem reescrever tudo
   em classes. Se o time preferir, o próximo passo natural é migrar esses
   estilos inline para classes utilitárias/CSS-in-JS do stack de vocês. */

@media (max-width: 860px) {
  .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 768px) {
  .section-pad { padding: 56px 20px !important; }
  .ent-grid { grid-template-columns: 1fr !important; }
  .captura-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .site-header { padding: 16px 20px !important; }
  .hero-inner { display: block !important; min-height: auto !important; padding: 0 20px 32px !important; }
  .hero-content { max-width: 100% !important; padding: 32px 0 0 !important; }
  .hero-h1 { font-size: 32px !important; }
  .hero-mascot { position: static !important; display: block !important; height: auto !important; max-height: none !important; width: 62% !important; max-width: 260px !important; margin: 28px auto 0 !important; }
  .comp-wrap { padding: 28px 20px !important; }
}

@media (max-width: 480px) {
  .cf-grid { grid-template-columns: 1fr !important; }
  .comp-labels, .comp-pair { grid-template-columns: 1fr !important; gap: 12px !important; }
  .comp-pair { margin-bottom: 12px; }
  .hero-h1 { font-size: 28px !important; }
  .site-header a { padding: 10px 16px !important; font-size: 13px !important; }
}

/* Telas largas: ancora o mascote na coluna de 1160px (alinhado ao header)
   em vez de colá-lo na borda direita da janela. */
@media (min-width: 769px) {
  .hero { --hero-gutter: max(0px, calc((100% - 1160px) / 2)); }
  .hero-mascot {
    right: var(--hero-gutter) !important;
    /* o PNG é cortado no ombro direito; esfuma a borda para não aparecer o corte */
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  }
  .hero-deco-amarelo { right: calc(var(--hero-gutter) - 140px) !important; }
  .hero-deco-verde { right: calc(var(--hero-gutter) + 60px) !important; }
}

/* ===== Aviso de cookies (LGPD) ===== */
.zk-cookies {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 760px; box-sizing: border-box; padding: 18px 20px;
  background: #ffffff; color: var(--zakaria-preto); border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -20px rgba(20, 20, 20, .45), 0 0 0 1px rgba(0, 0, 0, .04);
  opacity: 0; transform: translateY(40px) scale(.96);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.5, .5, 1);
}
.zk-cookies.zk-cookies-on { opacity: 1; transform: none; }
.zk-cookies-icone {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center; background: var(--zakaria-laranja);
}
.zk-cookies-texto { flex: 1 1 260px; min-width: 0; }
.zk-cookies-texto strong { display: block; font-size: 15px; margin-bottom: 2px; }
.zk-cookies-texto p { margin: 0; font-size: 13px; line-height: 1.5; color: #55575c; }
.zk-cookies-acoes { display: flex; gap: 10px; margin-left: auto; }
.zk-cookies-acoes button {
  font-family: inherit; font-size: 14px; font-weight: 700; padding: 10px 20px;
  border-radius: var(--radius-full); cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.zk-cookies-acoes button:hover { transform: translateY(-2px); }
.zk-cookies-aceitar { background: var(--zakaria-verde); color: #ffffff; border: none; }
.zk-cookies-recusar { background: transparent; color: var(--zakaria-preto); border: 1.5px solid #cfd0d2; }
.zk-cookies-recusar:hover { border-color: var(--zakaria-preto); }

@media (max-width: 560px) {
  .zk-cookies { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 16px; }
  .zk-cookies-acoes { width: 100%; }
  .zk-cookies-acoes button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .zk-cookies { transition: none; transform: none; }
}