/* =============================================================
   SPAR — Receitas
   A faixa da pagina inicial (por baixo do banner rotativo), a pagina
   /receitas e cada receita. Depende de tokens.css.
   O tom: papel de cozinha — um creme quente por baixo do verde e do
   vermelho da marca, e o tacho a traco da cena da cozinha.
   ============================================================= */
:root {
  --rec-papel: #fbf6ee;
  --rec-papel-linha: #eadfcd;
}

/* -------------------------------------------------------------
   Cena da cozinha (main/comuns/cena_cozinha.html)
   ------------------------------------------------------------- */
.cozinha {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 104px;
  flex: 0 0 auto;
}

.cozinha-tacho {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 64px;
  fill: none;
  stroke: var(--spar-green);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cozinha-lume {
  stroke: var(--spar-red);
  stroke-dasharray: 3 5;
}

.cozinha-vapor {
  position: absolute;
  left: 16px;
  top: 0;
  width: 64px;
  height: 40px;
  fill: none;
  stroke: var(--spar-ink-muted);
  stroke-width: 2;
  stroke-linecap: round;
  overflow: visible;
}

/* Os tres fios sobem e desvanecem, cada um com o seu tempo. */
.cozinha-vapor-fio {
  opacity: 0;
  animation: cozinha-subir 3.2s ease-in-out infinite;
}

.cozinha-vapor-fio--2 { animation-delay: 1.05s; }
.cozinha-vapor-fio--3 { animation-delay: 2.1s; }

@keyframes cozinha-subir {
  0%   { opacity: 0;  transform: translateY(8px); }
  25%  { opacity: .55; }
  100% { opacity: 0;  transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .cozinha-vapor-fio { animation: none; opacity: .4; }
}

/* -------------------------------------------------------------
   Faixa das receitas, na pagina inicial
   ------------------------------------------------------------- */
.receitas-faixa {
  width: var(--moldura);
  margin: var(--sp-6) auto var(--sp-8);
}

.receitas-faixa-cartao {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  color: var(--spar-ink);
  text-decoration: none;
  background-color: var(--rec-papel);
  border: 1px solid var(--rec-papel-linha);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.receitas-faixa-cartao:hover,
.receitas-faixa-cartao:focus-visible {
  color: var(--spar-ink);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.receitas-faixa-cartao:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* A caixa da cena tem 104px: os 40 de cima sao o vapor, quase invisivel, e
   o tacho ocupa so os 64 de baixo. Centrada a caixa, o desenho ficava 20px
   abaixo do meio do cartao (69px de folga em cima contra 29 em baixo); o
   translate sobe essa metade do vapor sem mexer na altura do cartao. */
.receitas-faixa-cartao .cozinha {
  transform: translateY(-20px);
}

.receitas-faixa-texto {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.receitas-faixa-titulo {
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--spar-green);
  text-wrap: balance;
}

.receitas-faixa-frase {
  /* 48ch cortava a frase mesmo antes do fim e deixava "festa." sozinha numa
     linha; 52ch chegam para ela caber toda quando ha espaco. Onde os cartoes
     apertam o texto, o balance reparte-o por duas linhas iguais em vez de
     deixar uma palavra perdida em baixo. */
  max-width: 52ch;
  color: var(--spar-ink-muted);
  text-wrap: balance;
}

.receitas-faixa-pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  font-weight: var(--fw-bold);
  color: var(--spar-ink-inverse);
  background-color: var(--spar-green);
  border-radius: var(--radius-pill);
  transition: background-color var(--t-fast), gap var(--t-fast);
}

.receitas-faixa-pilula svg {
  width: 18px;
  height: 18px;
}

.receitas-faixa-cartao:hover .receitas-faixa-pilula {
  background-color: var(--spar-green-action-hover);
  gap: var(--sp-3);
}

/* -------------------------------------------------------------
/* -------------------------------------------------------------
   O que cai na abertura (main/comuns/cena_a_cair.html)
   Camaroes e uma rodela de citrino, pelos flancos brancos a volta do
   titulo centrado de /receitas.
   ------------------------------------------------------------- */
.cair {
  /* Camada de fundo da abertura, por tras do que la esta escrito.
     O que cai nasce acima da caixa e morre abaixo: o que sai dela nao se
     ve. Nao apanha o rato, para nao roubar cliques a nada. */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cai {
  position: absolute;
  top: 0;
  display: block;
  /* Cada um tem o seu tempo, mais abaixo; este so vale se faltar. */
  animation: cai-devagar 20s linear infinite;
}

.cai svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: var(--spar-green);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .3;
}

/* O camarao e desenhado a cheio, nao a traco: o corpo e o leque da cauda
   sao manchas, e os aneis sao abertos por cima, da cor do fundo. */
.cai-camarao .camarao-corpo,
.cai-camarao .camarao-cauda {
  fill: var(--spar-green);
  stroke: none;
}

/* Os encaixes sao riscos da cor do fundo a entrar de fora para dentro; a
   ponta redonda e o que lhes da a forma arredondada, sem recta nenhuma. */
.cai-camarao .camarao-encaixes {
  fill: none;
  stroke: var(--spar-surface);
  stroke-width: 2.8;
  stroke-linecap: round;
}

/* A rodela e desenho de linha, como o tacho e os pinheiros. Com 34px
   lia-se como um pneu pequeno, e as pingas dos gomos so ganham forma com
   algum tamanho. */
.cai-citrino { stroke-width: 2.8; }
.cai-citrino .citrino-gomos { stroke-width: 2.2; }

/* As sementes sao cheias — sao o pormenor que diz "citrino". */
.cai-citrino .citrino-sementes {
  fill: var(--spar-green);
  stroke: none;
}

/* Dois de cada lado, nos flancos brancos a volta do titulo centrado.
   Contam-se **em pixels a partir das bordas**, nao em percentagem: a
   largura do texto nao acompanha a da moldura (o titulo tem um tamanho
   maximo e a frase esta presa a 56ch), por isso a folga de cada lado
   encolhe muito mais depressa do que a abertura. Medida: 382px de folga
   a 1920, 334 a 1440, 214 a 1200, 133 a 992 e **zero** a 640 — com
   percentagens fixas, os pedacos entravam pelo titulo dentro assim que
   se saia dos ecras largos. A banda usada aqui e de 180px.
   As letras que faltam (a, c, f, h) eram os lugares das massas. */
.cai--b { left:  48px; width: 44px; animation-duration: 22s; animation-delay:  -8s; }
.cai--d { left: 142px; width: 44px; animation-duration: 25s; animation-delay:  -4s; }
.cai--e { right: 142px; width: 44px; animation-duration: 18s; animation-delay: -11s; }
.cai--g { right:  48px; width: 46px; animation-duration: 20s; animation-delay:  -6s; }

/* Cai a bambolear devagar — devagar mesmo: os tempos foram ao dobro do
   que eram, a pedido. A volta e curta de proposito. */
@keyframes cai-devagar {
  from { transform: translateY(-70px) rotate(-14deg); }
  to   { transform: translateY(330px) rotate(58deg); }
}

/* A folga de cada lado encolhe depressa, e um pedaco a rodar ocupa mais
   do que a sua largura — a caixa dele cresce quase metade a meio da
   volta. Por isso caem os de dentro primeiro, e abaixo dos 992 o titulo
   e a frase ocupam a abertura toda e nao sobra flanco nenhum.
   O caminho da queda (330px) esta perto da altura da abertura (~255px) de
   proposito: com 420px cada pedaco passava metade do tempo fora da caixa
   e, com so quatro em cena, houve larguras onde nao se via nenhum. */
@media (max-width: 1199px) {
  .cai--d,
  .cai--e { display: none; }
}

@media (max-width: 991px) {
  .cair { display: none; }
}

/* A quem pediu menos movimento fica a mesma mancha, mas parada. */
@media (prefers-reduced-motion: reduce) {
  .cai { animation: none; }
  .cai--b { top: 52%; } .cai--d { top: 18%; }
  .cai--e { top: 12%; } .cai--g { top: 70%; }
}

/* As tres receitas mais recentes, como cartas de um receituario:
   ligeiramente rodadas e sobrepostas. */
.receitas-faixa-cartas {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  padding-right: var(--sp-3);
}

.receitas-faixa-carta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: 132px;
  padding: var(--sp-2);
  margin-left: -14px;
  background-color: var(--spar-surface);
  border: 1px solid var(--rec-papel-linha);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
  transition: transform var(--t-base);
}

.receitas-faixa-carta:first-child { margin-left: 0; }

/* A carta seguinte fica por cima: o texto das outras para antes dela. */
.receitas-faixa-carta:not(:last-child) {
  padding-right: calc(var(--sp-2) + 14px);
}
.receitas-faixa-carta:nth-child(2) { transform: rotate(2deg) translateY(-6px); }
.receitas-faixa-carta:nth-child(3) { transform: rotate(-1.5deg) translateY(2px); }

.receitas-faixa-cartao:hover .receitas-faixa-carta {
  transform: rotate(0) translateY(-4px);
}

.receitas-faixa-carta-foto {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--rec-papel);
}

.receitas-faixa-carta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sem fotografia: uma trama de linhas, como papel quadriculado. */
.receitas-faixa-carta-foto.sem-foto,
.rec-cartao-foto.sem-foto,
.rec-receita-foto.sem-foto {
  background-image: linear-gradient(var(--rec-papel-linha) 1px, transparent 1px),
                    linear-gradient(90deg, var(--rec-papel-linha) 1px, transparent 1px);
  background-size: 16px 16px;
  background-color: var(--rec-papel);
}

.receitas-faixa-carta-nome {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  /* O verde da marca, como o titulo da faixa. O tempo por baixo fica
     cinzento, para o nome da receita ser o que se le primeiro. */
  color: var(--spar-green);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.receitas-faixa-carta-tempo {
  font-size: var(--fs-xs);
  color: var(--spar-ink-muted);
}

/* -------------------------------------------------------------
   Pagina /receitas: abertura e categorias
   ------------------------------------------------------------- */
.rec-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--moldura);
  margin: var(--sp-7) auto 0;
  text-align: center;
}

/* O tacho, o titulo e a frase ficam por cima das massas que caem. */
.rec-hero .cozinha,
.rec-titulo,
.rec-lead {
  position: relative;
  z-index: 1;
}

.rec-hero .cozinha {
  margin-bottom: var(--sp-3);
}

.rec-titulo {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.7vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--spar-green);
  text-wrap: balance;
}

.rec-lead {
  max-width: 56ch;
  margin: var(--sp-3) auto 0;
  font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
  color: var(--spar-ink-muted);
}

/* As categorias como quatro cartoes lado a lado; "Todas" e uma pilula. */
.rec-categorias {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
  width: var(--moldura);
  margin: var(--sp-6) auto var(--sp-5);
}

.rec-categoria {
  display: flex;
  flex-direction: column;
  /* Encostado ao cimo, e nao ao centro: as frases partem em uma ou duas
     linhas conforme o cartao, e centradas punham os titulos a alturas
     diferentes de cartao para cartao. */
  justify-content: flex-start;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  color: var(--spar-ink);
  text-decoration: none;
  background-color: var(--spar-surface);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}

.rec-categoria:hover,
.rec-categoria:focus-visible {
  color: var(--spar-ink);
  text-decoration: none;
  border-color: var(--spar-green);
}

.rec-categoria.is-activa {
  color: var(--spar-ink-inverse);
  background-color: var(--spar-green);
  border-color: var(--spar-green);
}

.rec-categoria.is-activa .rec-categoria-texto {
  color: rgba(255, 255, 255, .8);
}

.rec-categoria-nome {
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--spar-green);
}

/* No cartao escolhido o fundo ja e verde: o titulo passa a branco. */
.rec-categoria.is-activa .rec-categoria-nome {
  color: inherit;
}

.rec-categoria-texto {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--spar-ink-muted);
}

/* "Todas" nao tem frase: fica uma pilula alta, alinhada com os cartoes. */
.rec-categorias > .rec-categoria:first-child {
  justify-content: center;
  align-items: center;
  padding-inline: var(--sp-5);
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------
   Cartoes de receita (pagina e "mais desta categoria")
   ------------------------------------------------------------- */
.rec-lista {
  width: var(--moldura);
  margin: 0 auto var(--sp-9);
}

.rec-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.rec-grelha--tres {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rec-cartao {
  display: flex;
  flex-direction: column;
  color: var(--spar-ink);
  text-decoration: none;
  background-color: var(--spar-surface);
  border: 1px solid var(--spar-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.rec-cartao:hover,
.rec-cartao:focus-visible {
  color: var(--spar-ink);
  text-decoration: none;
  border-color: var(--spar-green);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.rec-cartao-foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--rec-papel);
}

.rec-cartao-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base);
}

.rec-cartao:hover .rec-cartao-foto img {
  transform: scale(1.03);
}

.rec-cartao-etiqueta {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--spar-green);
  background-color: var(--spar-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.rec-cartao-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.rec-cartao-nome {
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.rec-cartao-resumo {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--spar-ink-muted);
}

.rec-cartao-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--spar-ink-muted);
}

.rec-cartao-meta .bi {
  color: var(--spar-green);
}

.rec-vazio {
  padding: var(--sp-8) 0;
  text-align: center;
  color: var(--spar-ink-muted);
}

/* -------------------------------------------------------------
   Uma receita
   ------------------------------------------------------------- */
.rec-receita {
  width: var(--moldura);
  margin: var(--sp-6) auto var(--sp-9);
}

.rec-voltar {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--spar-ink-muted);
}

.rec-voltar a {
  color: var(--spar-green);
  font-weight: var(--fw-bold);
}

.rec-receita-topo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}

.rec-receita-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--rec-papel);
}

.rec-receita-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-receita-foto .cozinha {
  transform: scale(1.6);
}

.rec-receita-categoria {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--spar-red);
}

.rec-receita-titulo {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--spar-green);
  text-wrap: balance;
}

.rec-receita-resumo {
  margin: var(--sp-3) 0 0;
  font-size: 1.1rem;
  color: var(--spar-ink-muted);
}

.rec-receita-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.rec-receita-meta li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 96px;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--rec-papel);
  border-radius: var(--radius-md);
}

.rec-receita-meta .bi {
  font-size: 1.2rem;
  color: var(--spar-green);
}

.rec-receita-meta span {
  margin-top: var(--sp-1);
  font-weight: var(--fw-bold);
}

.rec-receita-meta small {
  font-size: var(--fs-xs);
  color: var(--spar-ink-muted);
}

.rec-receita-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}

.rec-ingredientes {
  align-self: start;
  position: sticky;
  top: calc(var(--cabecalho-h, 0px) + var(--sp-4));
  padding: var(--sp-5);
  background-color: var(--rec-papel);
  border: 1px solid var(--rec-papel-linha);
  border-radius: var(--radius-lg);
}

.rec-ingredientes h2,
.rec-preparacao h2,
.rec-mais h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--spar-green);
}

/* As listas do TinyMCE: um ingrediente por linha, com um risco a
   tracejado por baixo, como numa folha de receitas. */
.rec-ingredientes-lista ul,
.rec-ingredientes-lista ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec-ingredientes-lista li {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--rec-papel-linha);
}

.rec-ingredientes-lista p {
  margin: 0 0 var(--sp-2);
}

.rec-lista-ligacao {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--spar-green);
}

/* Com artigos SPAR escolhidos, a ligacao e um botao a serio: estilo
   completo aqui, para nenhuma outra regra lhe mudar a cor das letras. */
.rec-lista-botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-4);
  padding: 0 var(--sp-4);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: var(--spar-green);
  border-radius: var(--radius-pill);
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}

.rec-lista-botao:hover,
.rec-lista-botao:focus-visible {
  color: #fff;
  text-decoration: none;
  background-color: var(--spar-green-action-hover);
  box-shadow: var(--shadow-md);
}

/* Os passos numerados a verde, grandes. */
.rec-preparacao-passos ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.rec-preparacao-passos ol li {
  position: relative;
  padding: 0 0 var(--sp-4) 52px;
  counter-increment: passo;
  line-height: 1.6;
}

.rec-preparacao-passos ol li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  color: var(--spar-ink-inverse);
  background-color: var(--spar-green);
  border-radius: 50%;
}

.rec-preparacao-passos p {
  margin: 0 0 var(--sp-3);
  line-height: 1.6;
}

.rec-dica {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--spar-red);
  background-color: var(--spar-surface-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.rec-dica-rotulo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-weight: var(--fw-bold);
  color: var(--spar-red);
}

.rec-dica p:last-child {
  margin-bottom: 0;
}

.rec-mais {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--spar-line);
}

/* -------------------------------------------------------------
   Ecras estreitos
   ------------------------------------------------------------- */
@media (max-width: 991px) {
  .receitas-faixa-cartas { display: none; }
  .rec-categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec-categorias > .rec-categoria:first-child { grid-column: 1 / -1; }
  .rec-receita-topo,
  .rec-receita-corpo { grid-template-columns: minmax(0, 1fr); }
  .rec-ingredientes { position: static; }
  .rec-grelha--tres { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 640px) {
  /* Aqui o cartao passa a coluna: a panela fica sozinha em cima do texto e
     ja nao ha nada ao lado para acompanhar, por isso volta ao sitio. */
  .receitas-faixa-cartao .cozinha { transform: none; }
  .receitas-faixa-cartao {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
  }
  .rec-categorias { grid-template-columns: minmax(0, 1fr); }
}