/* Ajustes da marca Jonas o Rei do Pãozinho.
   Fora de @layer de propósito: vale por cima das camadas da base, só para o que é específico desta marca. */

/* ---------- Selo no cabeçalho e no rodapé ---------- */
.brand:has(.brand__mark--logo) {
  padding: 4px;
  background: var(--c-jonas-navy);
}
.brand__mark--logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.site-footer__mark--logo {
  width: 76px;
  height: 76px;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--c-jonas-yellow), 0 12px 30px -10px #000a;
}

/* ---------- Sobre: citação do Jonas ---------- */
.sobre .about-body .quote {
  padding-left: 1em;
  border-left: 3px solid var(--c-jonas-yellow);
  font-family: var(--ff-garamond);
  font-size: 1.15em;
  font-style: italic;
  color: var(--c-jonas-cream);
}

/* ---------- Cardápio: foto do produto + botão de pedido dentro do card ---------- */
.dm-dcard__cream {
  padding-top: 15cqw;
}
.dm-dcard__num {
  top: 7cqw;
}
.dm-dcard__photo {
  flex: none;
  width: 56cqw;
  aspect-ratio: 4 / 3;
  margin: 0 0 5cqw 8cqw;
  object-fit: cover;
  border-radius: 2cqw;
  border: 1.2cqw solid #fff;
  box-shadow: 0 3cqw 6cqw -3cqw #0b102680;
  transform: rotate(-2deg);
  pointer-events: none;
}
.dm-dcard__order {
  flex: none;
  margin: 5cqw 0 0 8cqw;
  padding: 2.4cqw 5cqw 2.1cqw;
  border-radius: 999px;
  background: var(--c-jonas-navy);
  color: var(--c-jonas-yellow);
  font-family: var(--ff-sans);
  font-size: 3.4cqw;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}
.dm-dcard__order:hover {
  background: var(--c-jonas-blue);
  transform: translateY(-2px);
}
.dm-dcard:not([data-pos="active"]) .dm-dcard__order {
  pointer-events: none;
}

/* ---------- Como pedir: botão de ação no cartão ---------- */
.ma-card__cta {
  position: relative;
  z-index: 4;
  margin-top: 16px;
  padding: 0.8em 1.6em 0.7em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--c-jonas-yellow);
  font-family: var(--ff-sans);
  font-size: clamp(12px, 1.5cqi, 15px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.ma-card__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}

/* ---------- O Jonas: o nome gigante fica NA FRENTE da foto (a foto não é um recorte sem fundo) ---------- */
.sobre .bigname {
  z-index: -1;
  text-shadow: 0 0.04em 0.12em #0b1026b3;
}
.sobre .model {
  z-index: -2;
}


/* ---------- Depoimentos: título mais longo que o da base ("Quem come aprova") ---------- */
.dp-title__big {
  font-size: min(var(--dp-title), 8.6vw);
}