/* Estrutura do catálogo público — cores/fontes vêm dos blocos [data-tema="..."] no fim do arquivo.
   Nunca usar valores de cor fixos aqui em cima; sempre var(--cor-*)/var(--fonte-*). */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Garante que [hidden] sempre vence, mesmo em elementos cuja classe define `display`
   (ex: .modal-overlay, .campo-checkout) — sem isso, a regra da classe empata em
   especificidade com o `[hidden]{display:none}` padrão do navegador e vence por vir depois. */
[hidden] { display: none !important; }

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto, #333);
  background: #e8e5df;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  background: radial-gradient(120% 60% at 50% -8%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%), var(--cor-fundo-cartao);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
}
@media (min-width: 600px) {
  .page { margin: 22px auto; border-radius: 22px; min-height: auto; }
  body { padding: 0 14px; }
}
/* Acima de celular, o catálogo ganha espaço pros cards ficarem lado a lado (ver .produtos-grade)
   em vez de um card só, gigante, sobrando fundo vazio nas laterais. */
@media (min-width: 860px) {
  .page { max-width: 800px; }
}
@media (min-width: 1100px) {
  .page { max-width: 1080px; }
}
.wrap { padding: 0 20px; }

/* ---------- Grade de produtos: sempre lado a lado, número de colunas se ajusta à largura ---------- */
.produtos-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 14px;
}
@media (min-width: 480px) {
  .produtos-grade { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
}
@media (min-width: 860px) {
  .produtos-grade { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

.sprig { position: absolute; width: 92px; height: auto; opacity: 0.5; pointer-events: none; color: var(--cor-decoracao); }
.sprig.tl { top: 12px; left: 10px; transform: scaleX(-1); }
.sprig.tr { top: 12px; right: 10px; }

/* ---------- Cabeçalho ---------- */

header.catalogo-hero { position: relative; text-align: center; padding: 26px 20px 8px; }
.catalogo-logo {
  display: block;
  width: min(46%, 160px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.5);
}
.catalogo-hero h1 { font-family: var(--fonte-display); font-weight: 600; font-style: italic; font-size: 1.9rem; color: var(--cor-primaria); margin-top: 0.5rem; }
.head-rule { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 8px auto 0; color: var(--cor-acento); }
.head-rule::before, .head-rule::after { content: ""; height: 1px; width: 40px; background: var(--cor-acento-linha); }
.catalogo-tagline { font-weight: 800; font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cor-primaria); opacity: 0.8; }

/* ---------- Capa ---------- */

.hero { position: relative; margin: 16px 20px 0; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55); }
.hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.45) 100%); }

/* ---------- Informações importantes ---------- */

.catalogo-importante {
  margin: 32px 20px 8px; /* fim do catálogo, depois da última categoria */
  background: var(--cor-cartao);
  border: 1px solid var(--cor-acento-suave);
  border-radius: 14px;
  padding: 16px 18px;
}
.catalogo-importante h2 {
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: 0.6rem;
}
.catalogo-importante ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--cor-primaria); }
.catalogo-importante li::before { content: "· "; color: var(--cor-acento); font-weight: 800; }

/* ---------- Cabeçalho de seção ("fita") ---------- */

.ribbon-zone { position: relative; margin: 30px 0 8px; display: flex; justify-content: center; }
.ribbon {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-acento) 70%, white), var(--cor-acento));
  color: var(--cor-primaria-escura);
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  padding: 13px 38px;
  border-radius: 7px;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-acento) 80%, white), color-mix(in srgb, var(--cor-acento) 85%, black));
  z-index: -1;
}
.ribbon::before { left: -15px; clip-path: polygon(0 0, 100% 14%, 72% 50%, 100% 86%, 0 100%, 28% 50%); border-radius: 3px 0 0 3px; }
.ribbon::after { right: -15px; clip-path: polygon(100% 0, 0 14%, 28% 50%, 0 86%, 100% 100%, 72% 50%); border-radius: 0 3px 3px 0; }
.pick { text-align: center; font-size: 0.86rem; color: var(--cor-texto-suave); margin: 0 auto 16px; max-width: 30ch; }

.catalogo-vazio { text-align: center; color: var(--cor-texto-suave); padding: 3rem 1rem; }

/* ---------- Navegação por categoria ---------- */

.cat-nav-marcador { height: 0; }

.cat-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 20px 14px;
  margin: 0 -20px 6px;
  scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav.fixo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 560px;
  margin: 0 auto;
  z-index: 40;
  background: var(--cor-fundo-cartao);
  border-bottom: 1px solid var(--cor-acento-suave);
  box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.45);
}
.cat-nav-item {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--cor-acento-suave);
  background: var(--cor-cartao);
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-primaria);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cat-nav-item.ativo { background: var(--cor-primaria); color: var(--cor-sobre-escuro); border-color: var(--cor-primaria); }

.categoria-secao { margin-top: 26px; scroll-margin-top: 64px; }
.categoria-titulo {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--cor-primaria);
  text-align: center;
  margin-bottom: 14px;
}

/* ---------- Galeria (vitrine de fotos soltas, sem preço) ---------- */

.galeria-titulo {
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--cor-primaria);
  text-align: center;
  margin: 8px 0 12px;
}
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.galeria-item { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.5); }
.galeria-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.galeria-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- Cartão de produto ---------- */

.produto-card {
  /* Espaçamento vem do gap de .produtos-grade agora (o card mora numa grade, não empilhado solto). */
  background: var(--cor-cartao);
  border: 1px solid var(--cor-acento-suave);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.produto-card { position: relative; }
.produto-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Estoque: selo no canto da foto; esgotado apaga a foto e trava o botão (o card continua visível de propósito) */
.estoque-selo {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-weight: 800; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--cor-primaria); color: var(--cor-sobre-escuro);
}
.estoque-selo.poucas { background: var(--cor-acento); color: var(--cor-sobre-escuro); }
.estoque-selo.esgotado { background: var(--cor-perigo); color: #fff; }
.produto-card.esgotado .produto-foto { filter: grayscale(0.6); opacity: 0.7; }
.produto-card.esgotado .btn-pedir, .produto-card.esgotado .stepper { opacity: 0.45; pointer-events: none; }
.produto-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.produto-info h3 { font-family: var(--fonte-display); font-weight: 600; font-style: italic; font-size: 0.95rem; color: var(--cor-primaria); line-height: 1.2; }
.produto-descricao { font-size: 0.76rem; color: var(--cor-texto-suave); white-space: pre-line; }
.produto-preco { font-weight: 800; color: var(--cor-acento); font-size: 0.92rem; }

@media (min-width: 480px) {
  .produto-info { padding: 16px 18px 18px; gap: 0.5rem; }
  .produto-info h3 { font-size: 1.2rem; }
  .produto-descricao { font-size: 0.85rem; }
  .produto-preco { font-size: 1.05rem; }
}

/* ---------- CTA de pedido — produto simples ---------- */

.produto-pedido { margin-top: 0.3rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.stepper { display: flex; align-items: center; gap: 5px; }
.stepper-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--cor-acento); background: #fff; color: var(--cor-primaria);
  font-size: 0.9rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.stepper-valor { min-width: 1.2rem; text-align: center; font-weight: 800; font-size: 0.82rem; color: var(--cor-primaria); }
.btn-pedir {
  border: none; border-radius: 10px; padding: 9px 12px;
  background: var(--cor-primaria); color: var(--cor-sobre-escuro);
  font-family: var(--fonte-corpo); font-weight: 800; font-size: 0.76rem; cursor: pointer;
  flex: 1;
}
.btn-pedir[disabled] { opacity: 0.42; cursor: not-allowed; }

@media (min-width: 480px) {
  .produto-pedido { margin-top: 0.4rem; gap: 0.6rem; }
  .stepper { gap: 7px; }
  .stepper-btn { width: 27px; height: 27px; font-size: 1rem; }
  .stepper-valor { min-width: 1.4rem; font-size: 0.9rem; }
  .btn-pedir { border-radius: 12px; padding: 11px 18px; font-size: 0.88rem; }
}
.produto-pedido-aviso { font-size: 0.78rem; color: var(--cor-texto-suave); }

/* ---------- Prévia de sabores ---------- */

/* Prévia curta no card; a lista completa fica na janela */
.sabores-previa { font-size: 0.78rem; color: var(--cor-texto-suave); margin: 0 0 0.35rem; line-height: 1.4; }
.sabores-previa .sabores-mais { font-weight: 700; color: var(--cor-acento); white-space: nowrap; }
.produto-apartir small { display: block; font-weight: 600; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-texto-suave); }
.btn-escolher { flex: 0 0 auto; width: 100%; margin-top: auto; padding-top: 11px; padding-bottom: 11px; }
.produto-apartir { margin-bottom: 0.5rem; }
/* Sob orçamento: o lugar do preço vira o selo "Sob orçamento" (o botão é o mesmo dos outros cards) */
.produto-sob-orcamento { color: var(--cor-primaria); font-size: 0.86rem; }
#modal-config-corpo .builder { margin-top: 0; }

.flavors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0.2rem; }
.flavor {
  background: #fff; border: 1px solid var(--cor-acento-suave); border-radius: 10px;
  padding: 9px 10px; display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--cor-primaria);
}
.flavor .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-acento); }

/* ---------- Montador (produto configurável) ---------- */

.builder { display: flex; flex-direction: column; gap: 0; margin-top: 0.6rem; }
.step-label { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 0.9rem; color: var(--cor-primaria); margin: 16px 0 10px; }
.step-label:first-child { margin-top: 0; }
.step-label .num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cor-primaria); color: var(--cor-sobre-escuro);
  display: grid; place-items: center; font-size: 0.68rem; font-weight: 800;
}
.step-label .per { margin-left: auto; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-acento); }

.size-hint { min-height: 1.1em; font-size: 0.74rem; font-weight: 700; color: var(--cor-perigo); text-align: center; margin-top: 8px; }

.adder { display: flex; gap: 8px; }
.adder select {
  flex: 1; min-width: 0; font-family: var(--fonte-corpo); font-weight: 700; font-size: 0.88rem; color: var(--cor-primaria);
  background: #fff; border: 1.5px solid var(--cor-acento-suave); border-radius: 12px; padding: 11px 12px;
  appearance: none; -webkit-appearance: none;
  background-repeat: no-repeat; background-position: right 12px center;
  background-image: linear-gradient(45deg, transparent 50%, var(--cor-acento) 50%), linear-gradient(135deg, var(--cor-acento) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 18px center, right 12px center;
}
.adder .add {
  flex: 0 0 auto; font-family: var(--fonte-corpo); font-weight: 800; font-size: 0.88rem;
  color: var(--cor-sobre-escuro); background: var(--cor-primaria); border: none; border-radius: 12px; padding: 0 15px; cursor: pointer;
}
.adder .add:disabled { opacity: 0.42; cursor: not-allowed; }

.progress { height: 8px; border-radius: 999px; background: var(--cor-acento-suave); margin: 12px 0 5px; overflow: hidden; }
.progress .bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cor-acento), var(--cor-primaria)); transition: width 0.35s ease; }
.prog-label { font-size: 0.74rem; font-weight: 700; color: var(--cor-texto-suave); text-align: center; margin-bottom: 6px; }
.prog-label .completo { color: var(--cor-ok); }

.cart { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.cart-vazio { text-align: center; font-size: 0.8rem; color: var(--cor-texto-suave); background: #fff; border: 1px dashed var(--cor-acento-linha); border-radius: 12px; padding: 14px 10px; }
.linha-sabor { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--cor-acento-suave); border-radius: 12px; padding: 8px 10px; }
.linha-sabor .nome { flex: 1; min-width: 0; font-weight: 700; font-size: 0.82rem; color: var(--cor-primaria); }
.linha-sabor .qtd { font-weight: 800; font-size: 0.72rem; color: var(--cor-texto-suave); white-space: nowrap; }
.mini-stepper { display: flex; align-items: center; gap: 6px; }
.mini-stepper button {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--cor-acento); background: #fff; color: var(--cor-primaria);
  font-size: 0.9rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.mini-stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.linha-sabor .rm { flex: 0 0 auto; width: 22px; height: 22px; border: none; background: none; color: var(--cor-texto-suave); font-size: 1rem; cursor: pointer; }

.resumo-pedido {
  margin: 16px 0 10px;
  background: radial-gradient(120% 80% at 0% 0%, var(--cor-escuro-2) 0%, rgba(0, 0, 0, 0) 55%), var(--cor-escuro);
  color: var(--cor-sobre-escuro); border-radius: 14px; padding: 14px 16px;
}
.resumo-pedido .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.resumo-pedido .linha + .linha { margin-top: 4px; }
.resumo-pedido .chave { font-weight: 700; font-size: 0.8rem; opacity: 0.85; }
.resumo-pedido .valor { font-weight: 800; font-size: 0.88rem; color: #fff; }
.resumo-pedido .total .valor { font-family: var(--fonte-display); font-weight: 700; font-size: 1.3rem; }
.resumo-pedido .total .chave { font-size: 0.88rem; opacity: 1; }

.builder-pedir {
  width: 100%; border: none; border-radius: 13px; padding: 14px;
  font-family: var(--fonte-corpo); font-weight: 800; font-size: 0.95rem; cursor: pointer;
  background: var(--cor-primaria); color: var(--cor-sobre-escuro); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}
.builder-pedir[disabled] { background: var(--cor-acento-suave); color: var(--cor-texto-suave); box-shadow: none; cursor: not-allowed; }
.builder-aviso { font-size: 0.78rem; color: var(--cor-texto-suave); text-align: center; }

/* ---------- Rodapé ---------- */

footer { position: relative; text-align: center; padding: 30px 20px 32px; margin-top: 26px; }
footer::before { content: ""; display: block; width: 54px; height: 1px; background: var(--cor-acento-linha); margin: 0 auto 14px; }
.f-mark { font-family: var(--fonte-display); font-style: italic; font-weight: 600; color: var(--cor-primaria); font-size: 1.4rem; }
.f-sub { font-weight: 700; font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cor-acento); margin-top: 4px; }

/* ---------- animação de entrada ---------- */

.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
}

/* ---------------- Carrinho flutuante + modal de checkout ---------------- */

.btn-flutuante-carrinho {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
  font-family: var(--fonte-corpo);
  font-weight: 800;
  font-size: 0.92rem;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
}
#carrinho-total-mini { opacity: 0.85; font-weight: 700; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 14, 10, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
}

.modal-caixa {
  background: var(--cor-fundo-cartao);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
}
@media (min-width: 600px) {
  .modal-caixa { border-radius: 22px; max-height: 82vh; }
}

.modal-cabecalho {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cor-primaria);
  color: var(--cor-sobre-escuro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}
.modal-cabecalho h2 { font-family: var(--fonte-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.modal-fechar {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.modal-corpo { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; }

.lista-itens-carrinho { display: flex; flex-direction: column; gap: 8px; }
.item-carrinho {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--cor-acento-suave);
  border-radius: 12px;
  padding: 10px 12px;
}
.item-carrinho-corpo { flex: 1; min-width: 0; }
.item-carrinho-nome { font-weight: 800; font-size: 0.88rem; color: var(--cor-primaria); }
.item-carrinho-detalhe { font-size: 0.78rem; color: var(--cor-texto-suave); white-space: pre-line; }
.item-carrinho-preco { font-weight: 800; font-size: 0.85rem; color: var(--cor-acento); margin-top: 3px; }
.item-carrinho-remover {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--cor-perigo);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.carrinho-vazio-msg { text-align: center; font-size: 0.85rem; color: var(--cor-texto-suave); padding: 1.2rem 0.5rem; }

.carrinho-total-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-primaria);
  padding-top: 6px;
  border-top: 1.5px dashed var(--cor-acento-linha);
}

.btn-continuar-comprando {
  align-self: center;
  background: none;
  border: 1.5px solid var(--cor-acento-suave);
  color: var(--cor-primaria);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

.checkout-secao { display: flex; flex-direction: column; gap: 10px; }
.checkout-secao h3 { font-family: var(--fonte-display); font-weight: 600; font-size: 1.05rem; color: var(--cor-primaria); }

.campo-checkout { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.campo-checkout span:first-child { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-primaria); }
.campo-checkout input, .campo-checkout textarea {
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  color: var(--cor-texto);
  background: #fff;
  border: 1.5px solid var(--cor-acento-suave);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
}
.campo-checkout textarea { resize: vertical; min-height: 3.5em; }
.campo-checkout-linha { display: flex; gap: 10px; }
.campo-checkout-rotulo { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-primaria); }

.opcoes-entrega { display: flex; flex-direction: column; gap: 8px; }
.opcao-entrega {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--cor-acento-suave);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
}
.opcao-entrega:has(input:checked) {
  border-color: var(--cor-primaria);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cor-acento) 14%, white), color-mix(in srgb, var(--cor-acento) 24%, white));
}
.opcao-entrega-icone { font-size: 1.4rem; flex-shrink: 0; }
.opcao-entrega-texto { flex: 1; display: flex; flex-direction: column; }
.opcao-entrega-texto strong { font-size: 0.9rem; color: var(--cor-primaria); }
.opcao-entrega-texto small { font-size: 0.76rem; color: var(--cor-texto-suave); }
.opcao-entrega input[type="radio"] { width: 18px; height: 18px; accent-color: var(--cor-primaria); flex-shrink: 0; }

.checkout-status { font-size: 0.78rem; color: var(--cor-perigo); text-align: center; min-height: 1em; }

/* ---------- Montador de pedido sob orçamento ("Montar meu pedido") ---------- */

/* Barra fixa no rodapé — só com item montado: leva ao resumo/envio do orçamento */
.barra-montar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
}
.barra-montar .btn-montar { pointer-events: auto; max-width: 528px; }
.montar-contador { font-weight: 600; opacity: 0.85; }
body.montador-com-itens { padding-bottom: 84px; }
body.montador-com-itens .btn-flutuante-carrinho { bottom: 86px; }

/* Tela cheia no celular; caixa centralizada em tela grande */
.montador { position: fixed; inset: 0; z-index: 70; background: rgba(20, 14, 10, 0.55); display: flex; align-items: stretch; justify-content: center; }
.montador-caixa { background: var(--cor-fundo-cartao); width: 100%; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 600px) {
  .montador { align-items: center; padding: 16px; }
  .montador-caixa { max-width: 480px; max-height: 92vh; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
}
.montador-topo {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 8px 16px; border-bottom: 1px solid var(--cor-acento-suave);
}
.montador-voltar {
  background: none; border: none; cursor: pointer; font-family: var(--fonte-corpo); font-weight: 700; font-size: 0.86rem;
  color: var(--cor-primaria); padding: 6px 4px 6px 0;
}
.montador-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem; color: var(--cor-primaria); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.montador-voltar[hidden] + .montador-titulo { grid-column: 1 / 3; }
.montador-contagem { font-size: 0.74rem; font-weight: 700; color: var(--cor-texto-suave); white-space: nowrap; }
.montador-topo .modal-fechar { margin: 0; }
.montador-corpo { flex: 1; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.montador-rodape {
  display: flex; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cor-acento-suave); background: var(--cor-fundo-cartao);
}
.montador-rodape > button { flex: 1; }
.montador-rodape-coluna { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.montador-btn-sec {
  border: 1.5px solid var(--cor-primaria); background: transparent; color: var(--cor-primaria); border-radius: 13px; padding: 13px;
  font-family: var(--fonte-corpo); font-weight: 800; font-size: 0.95rem; cursor: pointer;
}
.montador-rodape .builder-pedir { flex: 2; }

.montador-h2 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.35rem; color: var(--cor-primaria); line-height: 1.15; }
.montador-sub { font-size: 0.82rem; color: var(--cor-texto-suave); }
.montador-nota { font-size: 0.76rem; color: var(--cor-texto-suave); text-align: center; }
.montador-passo-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.montador-pill {
  font-size: 0.72rem; font-weight: 800; color: var(--cor-primaria); background: var(--cor-cartao);
  border: 1px solid var(--cor-acento-suave); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.montador-progress { margin: 0; }
.montador-crumbs { display: flex; flex-wrap: wrap; gap: 5px; }
.montador-crumbs span {
  font-size: 0.7rem; font-weight: 700; color: var(--cor-primaria); background: var(--cor-acento-suave);
  border-radius: 999px; padding: 3px 9px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tela 1: cards dos itens (bolo, doces…) */
.montador-itens { display: flex; flex-direction: column; gap: 8px; }
.montador-item {
  display: grid; grid-template-columns: 72px 1fr 14px; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: var(--cor-cartao); border: 1.5px solid var(--cor-acento-suave); border-radius: 14px; padding: 9px; cursor: pointer;
  font-family: var(--fonte-corpo); color: var(--cor-texto); transition: border-color 0.15s;
}
.montador-item:hover, .montador-item:focus-visible { border-color: var(--cor-primaria); outline: none; }
.montador-item-foto { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: var(--cor-acento-suave); display: grid; place-items: center; }
.montador-item-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.montador-item-sem-foto { font-size: 1.6rem; }
.montador-item-texto strong { display: block; font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem; color: var(--cor-primaria); }
.montador-item-texto p { font-size: 0.76rem; color: var(--cor-texto-suave); margin-top: 2px; line-height: 1.3; }
.montador-item-seta { color: var(--cor-acento); font-size: 1.3rem; line-height: 1; }

/* Telas de etapa: uma opção por linha */
.montador-opcoes { display: flex; flex-direction: column; gap: 7px; }
.montador-opcao {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--cor-cartao); border: 1.5px solid var(--cor-acento-suave); border-radius: 12px; padding: 11px 12px; cursor: pointer;
  font-family: var(--fonte-corpo); font-weight: 600; font-size: 0.92rem; color: var(--cor-texto); transition: border-color 0.15s, background 0.15s;
}
.montador-opcao.sel { border-color: var(--cor-primaria); background: var(--cor-acento-suave); }
.montador-opcao.off { opacity: 0.45; cursor: not-allowed; }
.montador-opcao:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.montador-marca {
  width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--cor-acento-linha); background: var(--cor-cartao);
  display: grid; place-items: center; font-size: 0.7rem; color: var(--cor-sobre-escuro);
}
.montador-marca.radio { border-radius: 50%; }
.montador-marca.check { border-radius: 5px; }
.montador-opcao.sel .montador-marca { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.montador-opcao-texto { flex: 1; }
.montador-opcao small { font-size: 0.72rem; font-weight: 600; color: var(--cor-texto-suave); }
.montador-tag { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-sobre-escuro); background: var(--cor-primaria); border-radius: 999px; padding: 2px 7px; }
/* Opção de tamanho do produto configurável (preço fixo, ao contrário do tamanho sob orçamento acima, que não
   tem preço) — reaproveita o mesmo cartão de opção em lista, só que com o preço à direita, sempre visível. */
.montador-opcao:has(.montador-opcao-preco) { flex-wrap: wrap; row-gap: 4px; }
.montador-opcao-preco { font-family: var(--fonte-display); font-weight: 700; font-size: 0.95rem; color: var(--cor-primaria); white-space: nowrap; }
.montador-opcao.off .montador-opcao-preco { color: var(--cor-texto-suave); font-weight: 600; font-size: 0.78rem; }
.montador-dica { font-size: 0.78rem; color: var(--cor-texto-suave); background: var(--cor-cartao); border-left: 3px solid var(--cor-acento); padding: 7px 10px; border-radius: 0 8px 8px 0; }

/* Resumo */
.montador-pedido-item { background: var(--cor-cartao); border: 1px solid var(--cor-acento-suave); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.montador-pedido-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.montador-pedido-topo strong { font-family: var(--fonte-display); font-weight: 700; color: var(--cor-primaria); }
.montador-referencia { font-family: var(--fonte-corpo); font-weight: 700; font-size: 0.74rem; color: var(--cor-acento); white-space: nowrap; }
.montador-pedido-item p { font-size: 0.78rem; color: var(--cor-texto-suave); line-height: 1.4; }
.montador-link { background: none; border: none; cursor: pointer; font-family: var(--fonte-corpo); font-size: 0.74rem; font-weight: 700; color: var(--cor-acento); padding: 2px 4px; }
.montador-adicionar {
  width: 100%; background: transparent; border: 1.5px dashed var(--cor-acento-linha); border-radius: 12px; padding: 11px; cursor: pointer;
  font-family: var(--fonte-corpo); font-weight: 700; font-size: 0.88rem; color: var(--cor-primaria);
}
.montador-form { margin-top: 4px; }

/* Enviado */
.montador-enviado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 8px; }
.montador-enviado-icone { width: 56px; height: 56px; border-radius: 50%; background: var(--cor-ok); color: #fff; display: grid; place-items: center; font-size: 1.6rem; font-weight: 800; }

/* ---------- Pedido em passos (Tenant.pedidoEmPassos) ----------
   Mesmo desenho do catálogo antigo que as clientes gostavam: cabeçalho em degradê com "Passo N de 3",
   barra de passos (Detalhes · Dados · Resumo), resumo em linhas, "leia antes de confirmar" com aceite e o
   botão verde do WhatsApp. Usado pelo modal do carrinho (#modal-pedido) e pelo montador de orçamento. */
.pp-caixa { display: flex; flex-direction: column; overflow: hidden; max-height: 92vh; animation: pp-subir 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (min-width: 600px) { .pp-caixa { max-height: 88vh; } }
@keyframes pp-subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pp-entrar { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes pp-pulso { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

.pp-cabecalho {
  background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria));
  color: var(--cor-sobre-escuro);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
}
.pp-cabecalho h2 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.25rem; margin: 0; line-height: 1.15; }
.pp-cabecalho p { font-size: 0.78rem; opacity: 0.8; margin: 3px 0 0; }
.pp-cabecalho .modal-fechar { flex-shrink: 0; }

.pp-passos { display: flex; align-items: center; gap: 6px; padding: 12px 18px; background: color-mix(in srgb, var(--cor-acento) 16%, var(--cor-fundo-cartao)); }
.pp-passo { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; color: var(--cor-texto-suave); white-space: nowrap; }
.pp-passo-num {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center;
  font-size: 0.7rem; flex-shrink: 0; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.pp-passo.ativa { color: var(--cor-primaria); }
.pp-passo.ativa .pp-passo-num { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-escuro); transform: scale(1.1); }
.pp-passo.feita { color: var(--cor-acento); }
.pp-passo.feita .pp-passo-num { background: var(--cor-acento); border-color: var(--cor-acento); color: #fff; }
.pp-linha { flex: 1; height: 2px; min-width: 8px; background: var(--cor-acento-suave); border-radius: 2px; transition: background 0.3s; }
.pp-linha.feita { background: var(--cor-acento); }

.pp-corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pp-corpo.pp-anim { animation: pp-entrar 0.28s ease; }
.pp-h3 { font-family: var(--fonte-display); font-weight: 700; font-size: 1.15rem; color: var(--cor-primaria); margin: 0; }
.pp-sub { font-size: 0.8rem; color: var(--cor-texto-suave); margin: -8px 0 0; line-height: 1.45; }
.pp-erro { color: var(--cor-perigo); font-size: 0.78rem; text-align: center; min-height: 1em; margin: 0; }
.pp-erro:empty { display: none; }

/* Tiles de escolha (entrega, pagamento): círculo com ✓ no lugar do rádio nativo */
.pp-caixa .opcao-entrega, .montador.pp-modo .opcao-entrega { position: relative; transition: border-color 0.18s, background 0.18s, transform 0.18s; }
.pp-caixa .opcao-entrega:has(input:checked), .montador.pp-modo .opcao-entrega:has(input:checked) { transform: translateY(-1px); }
.pp-caixa .opcao-entrega input[type="radio"], .montador.pp-modo .opcao-entrega input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cor-acento-suave); background: var(--cor-cartao);
  flex-shrink: 0; display: grid; place-items: center; font-size: 0.72rem; color: transparent; transition: background 0.18s, border-color 0.18s;
}
.opcao-entrega:has(input:checked) .pp-check { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-escuro); }
.opcao-entrega:has(input:checked) .pp-check::after { content: "✓"; animation: pp-pulso 0.25s ease; }

/* Resumo em linhas */
.pp-resumo { background: var(--cor-cartao); border: 2px solid var(--cor-acento-suave); border-radius: 14px; padding: 14px 16px; }
.pp-resumo h4 { font-size: 0.85rem; font-weight: 800; color: var(--cor-primaria); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.pp-resumo-linha { font-size: 0.82rem; color: var(--cor-texto); padding: 6px 0; border-bottom: 1px solid var(--cor-acento-suave); line-height: 1.45; }
.pp-resumo-linha:last-child { border-bottom: 0; }
.pp-resumo-linha strong { color: var(--cor-primaria); }
.pp-resumo-item { white-space: pre-line; }
.pp-resumo-item .pp-resumo-preco { float: right; font-weight: 800; color: var(--cor-acento); margin-left: 8px; }
.pp-resumo-total { display: flex; justify-content: space-between; font-family: var(--fonte-display); font-weight: 700; font-size: 1.05rem; color: var(--cor-primaria); padding-top: 8px; }

/* "Leia antes de confirmar" — âmbar fixo de propósito (é aviso, não decoração do tema) */
.pp-leia { background: #fff8ec; border: 2px solid #e8a020; border-radius: 14px; padding: 14px 16px; color: #6b4400; }
.pp-leia h4 { font-size: 0.85rem; font-weight: 800; color: #7a5000; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.pp-leia ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-leia li { font-size: 0.8rem; line-height: 1.55; padding-left: 1.1em; text-indent: -1.1em; }
.pp-leia li::before { content: "•"; color: #e8a020; font-weight: 800; margin-right: 0.45em; }
.pp-ack { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e8a020; border-radius: 10px; padding: 12px; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #7a5000; line-height: 1.35; }
.pp-ack input { width: 20px; height: 20px; accent-color: #b8730a; flex-shrink: 0; margin: 0; }
.pp-finfo { background: var(--cor-cartao); border: 1.5px solid var(--cor-acento-suave); border-left: 3px solid var(--cor-acento); border-radius: 10px; padding: 11px 13px; font-size: 0.79rem; color: var(--cor-texto); line-height: 1.5; display: flex; gap: 8px; }

/* Rodapé: Anterior | Próximo | WhatsApp */
.pp-rodape { display: flex; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cor-acento-suave); background: var(--cor-fundo-cartao); }
.pp-rodape:empty { display: none; }
.pp-btn-prev, .pp-btn-next, .pp-btn-wpp {
  padding: 13px 14px; border-radius: 25px; font-family: var(--fonte-corpo); font-size: 0.92rem; cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform 0.15s, opacity 0.25s, filter 0.25s;
}
.pp-btn-prev { flex: 1; background: transparent; border: 2px solid var(--cor-acento-suave); color: var(--cor-primaria); font-weight: 700; }
.pp-btn-next { flex: 2; background: var(--cor-primaria); color: var(--cor-sobre-escuro); font-weight: 800; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6); }
.pp-btn-wpp { flex: 2; background: #25d366; color: #fff; font-weight: 800; box-shadow: 0 12px 26px -14px rgba(37, 211, 102, 0.8); }
.pp-btn-next:active, .pp-btn-wpp:active { transform: scale(0.98); }
.pp-btn-next[disabled], .pp-btn-wpp[disabled] { opacity: 0.45; filter: grayscale(0.4); cursor: not-allowed; box-shadow: none; }
.pp-btn-ghost { width: 100%; background: transparent; border: 1.5px dashed var(--cor-acento-linha); border-radius: 12px; padding: 11px; cursor: pointer; font-family: var(--fonte-corpo); font-weight: 700; font-size: 0.88rem; color: var(--cor-primaria); }

/* Montador de orçamento no modo em passos: cabeçalho vira o degradê e a barra de passos aparece */
.montador.pp-modo .montador-topo {
  background: linear-gradient(135deg, var(--cor-primaria-escura), var(--cor-primaria)); color: var(--cor-sobre-escuro); border-bottom: 0;
  grid-template-columns: 1fr auto; padding: calc(16px + env(safe-area-inset-top)) 16px 14px 20px;
}
.montador.pp-modo .montador-voltar { display: none; }
.montador.pp-modo .montador-titulo { grid-column: 1; grid-row: 1; color: inherit; font-size: 1.2rem; white-space: normal; }
.montador.pp-modo .montador-contagem { grid-column: 1; grid-row: 2; color: inherit; opacity: 0.8; font-weight: 600; white-space: normal; }
.montador.pp-modo .montador-topo .modal-fechar { grid-column: 2; grid-row: 1 / 3; }
.montador.pp-modo .montador-corpo.pp-anim { animation: pp-entrar 0.28s ease; }
.montador.pp-modo .montador-rodape { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .pp-caixa, .pp-corpo.pp-anim, .montador.pp-modo .montador-corpo.pp-anim, .opcao-entrega:has(input:checked) .pp-check::after { animation: none; }
}

/* ============================================================
   TEMAS — cada preset define a paleta+fontes completas.
   Nada acima desta linha deve ter cor fixa; tudo vem daqui.
   ============================================================ */

[data-tema="rose-dourado"] {
  --cor-primaria: #8b2252;
  --cor-primaria-escura: #6b1a40;
  --cor-acento: #c9963e;
  --cor-acento-suave: #e9d3a8;
  --cor-acento-linha: #dec08c;
  --cor-fundo-cartao: #fff7f5;
  --cor-cartao: #ffffff;
  --cor-texto: #4a2040;
  --cor-texto-suave: #9e7a8a;
  --cor-escuro: #2c0a1e;
  --cor-escuro-2: #3e1230;
  --cor-sobre-escuro: #fde8f2;
  --cor-decoracao: #d9b6c4;
  --cor-ok: #3f9d5a;
  --cor-perigo: #b4543f;
  --fonte-display: "Playfair Display", Georgia, serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-tema="vinho-dourado"] {
  --cor-primaria: #4a3722;
  --cor-primaria-escura: #342612;
  --cor-acento: #cf9038;
  --cor-acento-suave: #e7d2a6;
  --cor-acento-linha: #dbc298;
  --cor-fundo-cartao: #ece1cf;
  --cor-cartao: #f6efe0;
  --cor-texto: #5b4632;
  --cor-texto-suave: #9c8a6e;
  --cor-escuro: #2c2013;
  --cor-escuro-2: #3a2c1b;
  --cor-sobre-escuro: #f1e6d2;
  --cor-decoracao: #c9b68f;
  --cor-ok: #3f9d5a;
  --cor-perigo: #b4543f;
  --fonte-display: "Fraunces", Georgia, serif;
  --fonte-corpo: "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-tema="terracota-oliva"] {
  --cor-primaria: #c1603d;
  --cor-primaria-escura: #8f4229;
  --cor-acento: #7c8b5d;
  --cor-acento-suave: #d9e0c9;
  --cor-acento-linha: #c3cdaa;
  --cor-fundo-cartao: #fbf6ef;
  --cor-cartao: #ffffff;
  --cor-texto: #2b211b;
  --cor-texto-suave: #6b5d4f;
  --cor-escuro: #2b211b;
  --cor-escuro-2: #3d3025;
  --cor-sobre-escuro: #f3ecdf;
  --cor-decoracao: #b9a98a;
  --cor-ok: #3f9d5a;
  --cor-perigo: #b4543f;
  --fonte-display: "Source Serif 4", Georgia, serif;
  --fonte-corpo: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-tema="rosa-magenta"] {
  --cor-primaria: #d81b60;
  --cor-primaria-escura: #880e4f;
  --cor-acento: #f48fb1;
  --cor-acento-suave: #fbd3e1;
  --cor-acento-linha: #f5b8ce;
  --cor-fundo-cartao: #fff0f5;
  --cor-cartao: #ffffff;
  --cor-texto: #3a1020;
  --cor-texto-suave: #8c6273;
  --cor-escuro: #55123a;
  --cor-escuro-2: #6e1a4b;
  --cor-sobre-escuro: #fce4ef;
  --cor-decoracao: #f0afc7;
  --cor-ok: #3f9d5a;
  --cor-perigo: #b4543f;
  --fonte-display: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-tema="azul-marinho"] {
  --cor-primaria: #1e3a5f;
  --cor-primaria-escura: #14283f;
  --cor-acento: #b08d57;
  --cor-acento-suave: #e4d9c4;
  --cor-acento-linha: #d2c1a0;
  --cor-fundo-cartao: #f4f1ea;
  --cor-cartao: #ffffff;
  --cor-texto: #1c2733;
  --cor-texto-suave: #667385;
  --cor-escuro: #14283f;
  --cor-escuro-2: #1e3a5f;
  --cor-sobre-escuro: #e9eef3;
  --cor-decoracao: #a9b7c4;
  --cor-ok: #3f9d5a;
  --cor-perigo: #b4543f;
  --fonte-display: "Fraunces", Georgia, serif;
  --fonte-corpo: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}