/*
 * JB Nórdica — páginas do site (home, tipos, como funciona, cidades, sobre, showroom, contato, FAQ,
 * promoções, área gourmet, vídeos, obras, app, favoritas, legais e 404). Papel publico.
 * Base (botões, chips, cards, avisos, FAQ, seções) vem de site.css; cores e medidas de tokens.css.
 */

/* ---------- Seções e cabeças ---------- */
.jn-secao--colada { padding-top: 0; }
.jn-secao--promo { background: linear-gradient(180deg, var(--promo-suave), var(--bg) 70%); }
.jn-topo--pagina { padding: var(--e-4) 0 var(--e-6); }
.jn-topo--pagina h1 { font-size: var(--t-h1); line-height: 1.12; letter-spacing: -.02em; font-weight: 750; margin: 6px 0 0; }
.jn-topo--pagina .jn-topo__intro { margin-top: var(--e-3); font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.jn-topo--pagina .jn-chips, .jn-topo--pagina .jn-botoes { margin-top: var(--e-4); }
.jn-h3 { font-size: var(--t-h3); line-height: 1.25; font-weight: 700; }
.jn-nota { margin-top: var(--e-3); font-size: 15px; color: var(--ink-3); }
.jn-indice { margin: 0 0 var(--e-4); }
.jn-indice .jn-rotulo-sec { margin-bottom: 6px; }
.jn-lista-simples { display: flex; flex-direction: column; gap: 6px; padding-left: 1.1em; list-style: disc; color: var(--ink-2); }
.jn-lista-check--duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; }
@media (min-width: 768px) { .jn-lista-check--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Capa da home ---------- */
.jn-capa { padding: var(--e-4) 0 var(--e-8); }
.jn-capa__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: center; }
.jn-capa__foto { margin: 0 calc(var(--margem) * -1); position: relative; }
.jn-capa__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.jn-capa__foto figcaption { margin: 8px var(--margem) 0; font-size: 14px; color: var(--ink-3); }
.jn-capa__foto figcaption a { color: var(--ink-2); }
.jn-capa__texto { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.jn-capa__texto h1 { font-size: 36px; line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 0; }
.jn-capa__linha { font-size: 18px; color: var(--ink-2); margin: 0; }
.jn-capa__acoes { margin-top: var(--e-2); }
@media (min-width: 1080px) {
  .jn-capa { padding: var(--e-10) 0 var(--e-12); }
  .jn-capa__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-12); }
  .jn-capa__foto { order: 2; margin: 0; }
  .jn-capa__foto img { aspect-ratio: 1200 / 788; border-radius: var(--r-card); box-shadow: var(--sombra-2); }
  .jn-capa__foto figcaption { margin: 10px 0 0; }
  .jn-capa__texto h1 { font-size: var(--t-display); }
}

/* Busca da capa (rótulo visível + chips de tipo) */
.jn-busca-bloco { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-2); }
.jn-busca-bloco__form .jn-rotulo { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.jn-busca-bloco__tipos .jn-chips { margin: 0; padding-left: 0; list-style: none; }

/* ---------- Fileira horizontal (promoções) ---------- */
.jn-fileira-caixa { position: relative; }
.jn-fileira {
  display: grid; grid-auto-flow: column; grid-auto-columns: max(280px, 84%); gap: 16px; /* minmax(280px, 82%) ficava sempre em 280 */
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margem); padding: 4px var(--margem) 12px;
  margin: 0 calc(var(--margem) * -1); scrollbar-width: none; overscroll-behavior-x: contain;
}
.jn-fileira::-webkit-scrollbar { display: none; }
.jn-fileira > .jn-card { scroll-snap-align: start; }
.jn-fileira:focus-visible { outline: 3px solid var(--fiorde); outline-offset: 2px; }
.jn-fileira__setas { display: none; }
@media (min-width: 768px) { .jn-fileira { grid-auto-columns: minmax(300px, 44%); } }
@media (min-width: 1080px) {
  .jn-fileira { grid-auto-columns: calc((100% - 48px) / 3); margin: 0; padding: 4px 0 12px; scroll-padding: 0; }
  .jn-fileira__setas { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  .jn-fileira__seta { border: 1px solid var(--line); border-radius: var(--r-pilula); background: var(--surface); width: var(--h-alvo); height: var(--h-alvo); }
  .jn-fileira__seta:hover { border-color: var(--fiorde); color: var(--fiorde); }
  .jn-fileira__seta[disabled] { opacity: .4; }
}

/* ---------- 4 passos ---------- */
.jn-passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); counter-reset: none; padding: 0; margin: var(--e-2) 0 0; list-style: none; }
.jn-passo {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: var(--e-5) var(--e-5) var(--e-5) 76px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.jn-passo__num {
  position: absolute; left: var(--e-5); top: var(--e-5); display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--fiorde); color: var(--fiorde-tinta); font-weight: 800; font-size: 18px;
}
.jn-passo__ico { position: absolute; left: 30px; top: 70px; color: var(--ink-3); }
.jn-passo__ico .jn-ico { width: 22px; height: 22px; }
.jn-passo__titulo { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0; }
.jn-passo p { margin: 0; color: var(--ink-2); }
.jn-passo .jn-botao { align-self: flex-start; margin-top: 4px; }
.jn-passo__estado { display: inline-flex; align-items: center; gap: 6px; color: var(--ok) !important; font-weight: 600; }
.jn-passo__estado .jn-link-botao { min-height: 32px; }
@media (min-width: 768px) { .jn-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1080px) { .jn-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jn-passo { padding: 76px var(--e-5) var(--e-5); } .jn-passo__ico { left: auto; right: var(--e-5); top: 28px; } }

/* ---------- Números ---------- */
.jn-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); margin: 0; }
.jn-numero { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jn-numero dt { font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.jn-numero dd { margin: 0; }
.jn-numero__valor { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--fiorde); }
.jn-numero__texto { font-size: 15px; color: var(--ink-2); }
@media (min-width: 1080px) { .jn-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jn-numero__valor { font-size: 44px; } }

/* ---------- Tipos ---------- */
.jn-tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-tipo { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; }
.jn-tipo:hover { border-color: var(--fiorde); text-decoration: none; }
.jn-tipo__foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.jn-tipo__foto--vazia { display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.jn-tipo__texto { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.jn-tipo__texto strong { font-size: 18px; font-weight: 750; }
.jn-tipo__texto > span { font-size: 14px; color: var(--ink-2); }
.jn-tipo__conta { margin-top: 4px; font-weight: 700; color: var(--fiorde) !important; }
@media (min-width: 1080px) { .jn-tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-5); } }
.jn-tipos-nav { margin-top: var(--e-4); }
.jn-tipos-nav ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Showroom ---------- */
.jn-showroom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.jn-showroom__foto { margin: 0; }
.jn-showroom__foto img { width: 100%; aspect-ratio: 820 / 620; object-fit: cover; border-radius: var(--r-card); background: var(--surface-2); }
.jn-showroom__foto figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.jn-showroom__info { display: flex; flex-direction: column; gap: var(--e-3); }
.jn-showroom__info h2, .jn-showroom__info h3 { font-size: var(--t-h3); line-height: 1.2; font-weight: 750; margin: 0; }
.jn-showroom__endereco { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 600; }
.jn-showroom__endereco .jn-ico { color: var(--fiorde); margin-top: 2px; flex: 0 0 auto; }
.jn-showroom__nota { margin: 0; color: var(--ink-2); font-size: 15px; }
.jn-horario { border-collapse: collapse; width: 100%; max-width: 360px; font-size: 16px; }
.jn-horario caption { display: flex; align-items: center; gap: 6px; text-align: left; font-weight: 700; padding-bottom: 6px; }
.jn-horario th { text-align: left; font-weight: 600; padding: 6px 12px 6px 0; border-top: 1px solid var(--line); }
.jn-horario td { text-align: right; padding: 6px 0; border-top: 1px solid var(--line); }
@media (min-width: 1080px) { .jn-showroom { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-10); align-items: center; } }

/* ---------- Blog na home ---------- */
.jn-blog-grade { margin-top: var(--e-2); }
.jn-blog-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.jn-blog-card__capa img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.jn-blog-card__corpo { display: flex; flex-direction: column; gap: 6px; padding: var(--e-4); }
.jn-blog-card__titulo { font-size: 19px; line-height: 1.25; font-weight: 700; margin: 0; }
.jn-blog-card__titulo a { color: var(--ink); text-decoration: none; }
.jn-blog-card__titulo a:hover { text-decoration: underline; }
.jn-blog-card__resumo { margin: 0; color: var(--ink-2); font-size: 15px; }
.jn-blog-card__meta { margin: 0; color: var(--ink-3); font-size: 14px; }

/* ---------- Chamada (faixa com WhatsApp) ---------- */
.jn-chamada__caixa { display: flex; flex-direction: column; gap: var(--e-4); }
.jn-chamada__caixa h2 { font-size: var(--t-h3); line-height: 1.2; margin: 0 0 6px; }
.jn-chamada__caixa p { margin: 0; color: var(--ink-2); }
@media (min-width: 768px) { .jn-chamada__caixa { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- Cartões de texto ---------- */
.jn-cartoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
.jn-cartao--texto { padding: var(--e-5); }
.jn-cartao__titulo { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.jn-cartao--texto p { margin: 0; color: var(--ink-2); }
@media (min-width: 768px) { .jn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); } }
@media (min-width: 1080px) { .jn-cartoes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Faixas da obra ---------- */
.jn-bloco-faixas { padding-top: var(--e-6); padding-bottom: var(--e-6); }
.jn-bloco-faixas .jn-h3 { margin-bottom: var(--e-3); }
.jn-faixas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-faixa { display: flex; flex-direction: column; gap: 6px; padding: var(--e-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-faixa[data-atual] { border-color: var(--fiorde); background: var(--fiorde-suave); }
.jn-faixa__titulo { margin: 0; font-weight: 700; }
.jn-faixa__min { margin: 0; color: var(--ink-2); }
.jn-faixa__min .jn-num { font-size: 22px; font-weight: 800; color: var(--ink); margin-right: 4px; }
.jn-faixa__atual { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--fiorde); font-weight: 700; }
.jn-faixa .jn-botao { align-self: flex-start; }
@media (min-width: 768px) { .jn-faixas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-exemplo { margin: var(--e-4) 0 0; padding: var(--e-4); border-left: 4px solid var(--fiorde); background: var(--surface); border-radius: 0 var(--r-botao) var(--r-botao) 0; }
.jn-exemplo p { margin: 6px 0 0; }

/* ---------- Etapas da obra ---------- */
.jn-barra-etapas { display: flex; height: 44px; border-radius: var(--r-botao); overflow: hidden; margin: var(--e-2) 0 var(--e-5); border: 1px solid var(--line); }
.jn-barra-etapas__parte { flex: var(--p) 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; background: var(--fiorde); color: var(--fiorde-tinta); font-size: 14px; font-weight: 700; border-right: 2px solid var(--surface); }
.jn-barra-etapas__parte:nth-child(even) { background: var(--fiorde-suave); color: var(--fiorde); }
.jn-barra-etapas__parte:last-child { border-right: 0; }
.jn-linha-tempo { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.jn-etapa { position: relative; display: flex; gap: var(--e-4); padding-bottom: var(--e-5); }
.jn-etapa::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.jn-etapa:last-child::before { display: none; }
.jn-etapa__marca { flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--fiorde); color: var(--fiorde); font-weight: 800; position: relative; z-index: 1; }
.jn-etapa[data-pagamento="1"] .jn-etapa__marca { background: var(--fiorde); color: var(--fiorde-tinta); }
.jn-etapa__corpo { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; min-width: 0; }
.jn-etapa__pct { margin: 0; font-size: 15px; font-weight: 800; color: var(--fiorde); }
.jn-etapa[data-pagamento="0"] .jn-etapa__pct { color: var(--ink-3); font-weight: 600; }
.jn-etapa__titulo { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.jn-etapa__texto { margin: 2px 0 0; color: var(--ink-2); font-size: 15px; }
@media (min-width: 1080px) {
  .jn-linha-tempo { flex-direction: row; gap: var(--e-4); }
  .jn-etapa { flex: 1 1 0; flex-direction: column; gap: var(--e-3); padding-bottom: 0; }
  .jn-etapa::before { left: 40px; right: calc(var(--e-4) * -1); top: 19px; bottom: auto; width: auto; height: 2px; }
}
.jn-como-casa { margin-top: var(--e-6); padding: var(--e-5); border: 1px solid var(--fiorde); border-radius: var(--r-card); background: var(--surface); }
.jn-como-casa__topo { margin-bottom: var(--e-3); }
.jn-como-casa__nome { margin: 4px 0 0; font-size: 18px; font-weight: 700; }

/* ---------- Prazos e garantia ---------- */
.jn-prazos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; }
.jn-prazo { padding: var(--e-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-prazo dt { font-weight: 700; }
.jn-prazo dd { margin: 6px 0 0; color: var(--ink-2); }
.jn-prazo__num { display: block; font-size: 30px; font-weight: 800; color: var(--fiorde); line-height: 1.1; margin-bottom: 4px; }
@media (min-width: 768px) { .jn-prazos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-garantia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.jn-garantia__item { padding: var(--e-4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-garantia__item p { margin: 4px 0 0; color: var(--ink-2); }
.jn-garantia__num { margin: 0 !important; font-size: 34px; font-weight: 800; color: var(--fiorde) !important; line-height: 1.05; }
.jn-garantia__resumo { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- Madeiras ---------- */
.jn-madeiras__intro { margin: 0 0 var(--e-4); color: var(--ink-2); max-width: 70ch; }
.jn-madeiras { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.jn-madeiras--uma { max-width: 720px; }
.jn-madeira-cartao { padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-madeira-cartao__amostra { display: block; width: 100%; height: 14px; border-radius: 7px; background: var(--pinus); margin-bottom: var(--e-3); }
.jn-madeira-cartao[data-madeira="garapa"] .jn-madeira-cartao__amostra { background: var(--garapa); }
.jn-madeira-cartao__titulo { font-size: 20px; font-weight: 750; margin: 0 0 var(--e-2); }
@media (min-width: 768px) { .jn-madeiras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jn-madeiras--uma { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Terreno ---------- */
.jn-opcoes-terreno { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.jn-opcoes-terreno .jn-cartao { padding: var(--e-5); }
@media (min-width: 768px) { .jn-opcoes-terreno { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-grupos summary .jn-selo { margin-left: auto; margin-right: 8px; }

/* ---------- Sobre, obras e depoimentos ---------- */
.jn-sobre-duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-8); }
@media (min-width: 1080px) { .jn-sobre-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-12); } }
.jn-obras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-obra { display: flex; flex-direction: column; gap: 4px; }
.jn-obra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); background: var(--surface-2); }
.jn-obra__titulo { margin: 4px 0 0; font-weight: 700; }
.jn-obra__local { margin: 0; color: var(--ink-3); font-size: 14px; }
@media (min-width: 1080px) { .jn-obras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); } }
.jn-depoimentos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.jn-depoimento { margin: 0; padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-depoimento p { margin: 0; font-size: 18px; line-height: 1.55; }
.jn-depoimento footer { margin-top: var(--e-3); color: var(--ink-3); font-weight: 600; font-size: 15px; }
@media (min-width: 1080px) { .jn-depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-dados-empresa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; }
.jn-dados-empresa dt { font-size: 14px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.jn-dados-empresa dd { margin: 2px 0 0; font-weight: 600; }
@media (min-width: 768px) { .jn-dados-empresa { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Contato ---------- */
.jn-canais { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-canal { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-canal > .jn-ico { flex: 0 0 auto; width: 28px; height: 28px; color: var(--fiorde); }
.jn-canal > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.jn-canal p { margin: 0; }
.jn-canal--principal { border-color: var(--conversa); }
.jn-canal--principal > .jn-ico { color: var(--conversa); }
.jn-canal__titulo { font-size: 18px; font-weight: 700; margin: 0; }
@media (min-width: 768px) { .jn-canais { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jn-canal--principal { grid-column: 1 / -1; } }

/* ---------- Cidades ---------- */
.jn-cidades-busca { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-bottom: var(--e-6); }
.jn-grupos-cidades { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.jn-grupo-cidades h2, .jn-grupo-cidades h3 { font-size: 20px; font-weight: 700; margin: 0 0 var(--e-3); }
.jn-lista-cidades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jn-lista-cidades [hidden] { display: none; }
@media (min-width: 1080px) { .jn-grupos-cidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.jn-faq-grupo { margin-bottom: var(--e-8); scroll-margin-top: calc(var(--h-cabecalho) + 16px); }
.jn-faq-grupo > h2 { font-size: var(--t-h3); margin: 0 0 var(--e-3); }
.jn-faq__resposta > p, .jn-faq__resposta > ul { margin: 0 0 8px; }
.jn-faq__resposta ul { padding-left: 1.1em; list-style: disc; }
.jn-faq__link { margin: 8px 0 0 !important; font-weight: 650; }
.jn-faq-fim { padding: var(--e-6); margin-top: var(--e-6); }

/* ---------- Área gourmet ---------- */
.jn-regras-gourmet { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-regra { padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-regra p { margin: 0; }
.jn-regra__titulo { font-size: 14px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.jn-regra__valor { margin-top: 4px !important; font-size: 24px; font-weight: 800; color: var(--fiorde); line-height: 1.15; }
.jn-regra__texto { margin-top: 6px !important; color: var(--ink-2); }
@media (min-width: 768px) { .jn-regras-gourmet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-gourmet-escopo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
@media (min-width: 768px) { .jn-gourmet-escopo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-gourmet-modos { margin-bottom: var(--e-4); }
.jn-gourmet-modos ul { margin: 0; padding: 0; list-style: none; }
.jn-card--gourmet .jn-card__fotos > img, .jn-card--gourmet .jn-card__fotos > .jn-card__planta { aspect-ratio: 4 / 3; }
.jn-selo--gourmet { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--r-pilula); background: var(--ok-suave); color: var(--ok); font-size: 14px; font-weight: 700; }
.jn-selo--gourmet[data-sozinha="0"] { background: var(--surface-2); color: var(--ink-2); }
.jn-card__acoes--uma { display: grid; grid-template-columns: minmax(0, 1fr); }

/* ---------- Vídeos ---------- */
.jn-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
.jn-video-casa { display: flex; flex-direction: column; gap: 10px; }
.jn-video-casa__titulo { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.jn-video-casa__titulo a { color: var(--ink); text-decoration: none; }
.jn-video-casa__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--ink-2); font-size: 15px; }
@media (min-width: 768px) { .jn-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .jn-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Canal do YouTube e aviso "em breve" ---------- */
.jn-em-breve { padding: var(--e-8) var(--e-5); text-align: center; border: 1px dashed var(--borda-campo); border-radius: var(--r-card); background: var(--surface); }
.jn-em-breve p { margin: 0 auto var(--e-4); max-width: 46ch; color: var(--ink-2); }

/* ---------- App ---------- */
.jn-app-passos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
.jn-app-plataforma { padding: var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-app-plataforma[data-destaque] { border-color: var(--fiorde); box-shadow: 0 0 0 1px var(--fiorde); }
.jn-app-plataforma h2, .jn-app-plataforma h3 { font-size: 20px; margin: 0 0 var(--e-3); display: flex; align-items: center; gap: 8px; }
.jn-app-plataforma ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.jn-app-plataforma .jn-botao { margin-top: var(--e-4); }
.jn-app-plataforma [data-instalar-app]:not([data-pronto]) { display: none; }
@media (min-width: 768px) { .jn-app-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-app-recursos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.jn-app-recursos li { display: flex; gap: 12px; align-items: flex-start; padding: var(--e-4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.jn-app-recursos .jn-ico { color: var(--fiorde); flex: 0 0 auto; width: 24px; height: 24px; }
.jn-app-recursos strong { display: block; }
.jn-app-recursos span { color: var(--ink-2); font-size: 15px; }
@media (min-width: 768px) { .jn-app-recursos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Páginas legais ---------- */
.jn-legal__data { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 15px; }
.jn-legal__indice { margin: 0 0 var(--e-6); padding: var(--e-4) var(--e-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.jn-legal__indice ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.jn-legal section { scroll-margin-top: calc(var(--h-cabecalho) + 16px); }
.jn-legal h2 { font-size: 22px; margin: var(--e-8) 0 var(--e-3); }
.jn-legal__num { color: var(--fiorde); margin-right: 4px; }
.jn-legal__outras { margin-top: var(--e-8); }
.jn-legal__outras ul { margin: 0; padding: 0; list-style: none; }
.jn-itens-legais { display: flex; flex-direction: column; gap: var(--e-3); margin: var(--e-3) 0; }
.jn-itens-legais > div { padding: var(--e-3) var(--e-4); border: 1px solid var(--line); border-radius: var(--r-botao); background: var(--surface); }
.jn-itens-legais dt code { font-size: 15px; font-weight: 700; color: var(--fiorde); }
.jn-itens-legais dd { margin: 4px 0 0; color: var(--ink-2); }
.jn-itens-legais__validade { font-size: 14px; color: var(--ink-3) !important; }

/* ---------- 404 ---------- */
.jn-erro { padding-top: var(--e-8); }
.jn-erro__busca { max-width: 560px; margin: var(--e-4) 0; }

/* ---------- Favoritas e comparar ---------- */
.jn-fav-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 var(--e-4); }
.jn-fav-acoes__conta { margin-right: auto; font-weight: 700; }
.jn-fav-comparar { display: flex; align-items: center; gap: 10px; min-height: var(--h-alvo); padding: 0 12px; margin: 0 4px; border: 1px solid var(--line); border-radius: var(--r-botao); background: var(--surface-2); font-weight: 600; cursor: pointer; }
.jn-fav-comparar input { width: 22px; height: 22px; accent-color: var(--fiorde); }
.jn-fav-comparar:has(input:checked) { border-color: var(--fiorde); background: var(--fiorde-suave); color: var(--fiorde); }
.jn-sem-conexao-fav { margin-bottom: var(--e-4); }
.jn-comparar { scroll-margin-top: calc(var(--h-cabecalho) + 16px); }
.jn-comparar__tabela { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.jn-comparar__tabela th, .jn-comparar__tabela td { padding: 10px 8px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.jn-comparar__tabela thead th, .jn-comparar__tabela thead td { border-top: 0; }
.jn-comparar__tabela tbody th { color: var(--ink-2); font-weight: 650; background: var(--surface-2); }
.jn-comparar__tabela thead td, .jn-comparar__tabela tbody th { width: 27%; }
.jn-comparar__foto { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; max-height: 104px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.jn-comparar__nome { display: block; margin-top: 6px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.jn-comparar__tabela tr[data-difere] th::after { content: "difere"; display: block; width: fit-content; margin-top: 4px; padding: 0 6px; border-radius: var(--r-pilula); background: var(--aviso-suave); color: var(--aviso); font-size: 12px; font-weight: 700; }
.jn-comparar__tabela .jn-preco-escolher { min-height: 40px; font-size: 13px; padding: 4px 8px; }
.jn-comparar__abas { display: flex; gap: 8px; margin: 0 0 var(--e-3); }
@media (min-width: 768px) { .jn-comparar__tabela { font-size: 16px; } .jn-comparar__tabela th, .jn-comparar__tabela td { padding: 12px 14px; } .jn-comparar__tabela thead td, .jn-comparar__tabela tbody th { width: 20%; } .jn-comparar__foto { max-height: 160px; } }
.jn-lista-cidades a { display: inline-flex; align-items: center; gap: 4px; min-height: var(--h-alvo); padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: var(--r-pilula); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.jn-lista-cidades a:hover { border-color: var(--fiorde); color: var(--fiorde); }
.jn-lista-cidades a .jn-ico { color: var(--ink-3); }

/* ---------- Card de artigo do blog na home e no 404 (mesmo desenho do blog.css) ---------- */
.jn-artigo-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sombra-1);
  transition: border-color var(--mov-rapido) var(--curva);
}
[data-tema="noite"] .jn-artigo-card { box-shadow: none; }
.jn-artigo-card:hover { border-color: var(--borda-campo); }
.jn-artigo-card:focus-within { box-shadow: 0 0 0 2px var(--foco-folga), 0 0 0 5px var(--fiorde); }
.jn-artigo-card__midia { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.jn-artigo-card__midia img { width: 100%; height: 100%; object-fit: cover; }
.jn-artigo-card__corpo { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 16px 18px 18px; }
.jn-artigo-card__tema {
  font-size: var(--t-rotulo); font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.jn-artigo-card__titulo { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.jn-artigo-card__titulo a { color: var(--ink); text-decoration: none; }
.jn-artigo-card__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.jn-artigo-card__titulo a:focus-visible { box-shadow: none; }
.jn-artigo-card:hover .jn-artigo-card__titulo a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jn-artigo-card__resumo {
  color: var(--ink-2); font-size: 16px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jn-artigo-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 4px;
  font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.jn-artigo-card__ler { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--fiorde); font-weight: 650; font-size: 16px; }

.jn-comparar__tabela td.jn-num { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 420px) { .jn-comparar__tabela td { font-size: 13px; padding-left: 6px; padding-right: 6px; } }