/* Catálogo interativo da Milplantas (reunião de 29/10/2026 com o Rodrigo, o Jonatha e o time da Viral):
   entrada pela fachada, busca, guia por ocasião, cadastro que libera o preço, estoque do JRS, parecidas e
   orçamento. Carrega depois do loja.css e usa os tokens dele. */

/* ---------- a entrada: a fachada do Box 71B, desenhada a partir do reel de 23/04 ----------
   Parede verde-acinzentada com frisos verde-escuros, logo dourado em relevo, vitrine de vidro e o toldinho
   listrado creme e verde de borda recortada. Cores medidas nas fotos da fachada de 29/10/2026 (parede #686d5e a
   #808179, friso #204840). Ao rolar, a câmera entra pela vitrine (loja.js, entrar()). */
:root {
  --toldo-creme: #efe5cc;
  --toldo-verde: #16301f;
  --parede: #777a6b;
  --parede-escura: #5f6456;
  --moldura: #1f4a3e;
  --fora: #f6b4a6;
}
.entrada { position: relative; height: 260vh; background: var(--preto); }
.entrada__palco { position: sticky; top: var(--topo-h); height: calc(100vh - var(--topo-h)); height: calc(100dvh - var(--topo-h)); overflow: hidden; container-type: size; }
/* a cena é vista do corredor, de longe o bastante pra caber inteira: teto do galpão, parede, vitrine e chão.
   Antes a vitrine ocupava a altura toda e era cortada embaixo, e a fachada parecia colada no rosto (29/10) */
.fachada {
  position: absolute; inset: 0; display: grid; grid-template-rows: 13cqh 1fr 25cqh;
  background: var(--preto); transform-origin: 50% 55%; will-change: transform;
}
.fachada__teto {
  position: relative; z-index: 1; box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  background:
    radial-gradient(18cqw 9cqh at 22% 100%, rgba(255, 240, 205, .16), transparent 70%),
    radial-gradient(18cqw 9cqh at 78% 100%, rgba(255, 240, 205, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 9cqw),
    linear-gradient(180deg, #0e1310 0%, #1b211d 100%);
}
.fachada__parede {
  position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 2.4cqw;
  padding: 0 2.4cqw; overflow: hidden;
  background:
    radial-gradient(55% 70% at 50% 20%, rgba(255, 248, 225, .16), transparent 70%),
    linear-gradient(180deg, var(--parede-escura) 0%, var(--parede) 22%, var(--parede) 70%, var(--parede-escura) 100%);
}
/* as molduras da parede, com o friso verde e um quadro baixo embaixo, como na foto */
.fachada__painel {
  position: relative; flex: none; display: grid; justify-items: center; gap: 1.6cqh;
  height: calc(100% - 13cqh); margin-bottom: 9cqh; padding: 0 1.2cqw;
  border: clamp(3px, .3vw, 5px) solid var(--moldura);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .16), inset 0 2px 3px rgba(0, 0, 0, .12);
}
.fachada__painel::after {
  content: ''; position: absolute; left: -4px; right: -4px; top: calc(100% + 2.2cqh); height: 4.6cqh;
  border: inherit; box-shadow: inherit;
}
.fachada__painel--estreito { width: 9cqw; }
.fachada__painel--logo { width: 21cqw; align-content: start; padding-top: 7cqh; }
.fachada__painel--box { width: 21cqw; align-content: center; text-align: center; }
/* letras em relevo: a sombra curta e dura de peça presa na parede, não o brilho difuso */
.fachada__mono { width: min(62%, 21cqh); height: auto; filter: drop-shadow(2px 3px 2px rgba(30, 32, 24, .45)); }
.fachada__escrita { width: min(80%, 27cqh); height: auto; filter: drop-shadow(2px 3px 2px rgba(30, 32, 24, .45)); }
.fachada__painel--box span { font: 700 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--moldura); }
.fachada__painel--box b { font: 400 clamp(28px, 6cqh, 52px)/1 var(--titulo); color: var(--moldura); }
/* a vitrine de vidro da fachada. Nome próprio de propósito: ".vitrine" é a seção "Todas as flores", e o estilo
   do vidro vazava nela (borda, a divisão da porta virando um risco no meio, 29/10). Vidro em proporção de loja, encostada no chão, com caixilho preto (sem a divisão da porta, que cortava a foto ao meio) */
.fachada__vidro {
  position: relative; flex: none; height: calc(100% - 13cqh); aspect-ratio: 5 / 4; max-width: 44cqw;
  overflow: hidden; border: clamp(4px, .45vw, 7px) solid #101511; border-bottom-width: clamp(6px, .6vw, 9px);
  background: #0b100d; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.fachada__vidro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.fachada__vidro-reflexo {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .08) 72%, rgba(255, 255, 255, 0) 84%);
}
/* o cordão de luzinhas da vitrine de verdade, de leve na borda de cima */
.fachada__vidro-luz {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 180, .95) 0 1.4px, transparent 2.4px) 0 4px / 16px 10px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 220, 150, .8));
}
/* o chão de concreto liso do corredor, com a vitrine refletida */
.fachada__chao {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 18%),
    linear-gradient(180deg, #5b5d57 0%, #44463f 55%, #2c2e29 100%);
}
.fachada__reflexo {
  position: absolute; top: 0; height: 120%; object-fit: cover; object-position: 50% 55%;
  transform: scaleY(-1); opacity: .3; filter: blur(2px) saturate(.85);
  /* a máscara vira junto com o scaleY: 180deg aqui deixa o reflexo forte colado na vitrine */
  -webkit-mask: linear-gradient(180deg, transparent 40%, #000 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent 40%, #000 100%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}

/* a fachada pela imagem (entrada--foto): a foto cobre o palco e a fachada desenhada some. O enquadramento segura a
   vitrine; no celular, que mostra só uma fatia da imagem larga, a fatia é a da porta */
.fachada__foto { display: none; }
.entrada--foto .fachada > :not(.fachada__foto) { display: none; }
.entrada--foto .fachada__foto { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.entrada--foto .fachada::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(12, 16, 13, .78) 0%, rgba(12, 16, 13, 0) 30%); }
@media (max-width: 760px) { .entrada--foto .fachada__foto { object-position: 70% 50%; } }
/* em cima da foto, que é cheia de luzinha, o convite ganha uma cápsula escura pra ser lido */
.entrada--foto .entrada__convite {
  gap: 5px; padding: 12px 24px; border: 1px solid rgba(223, 199, 127, .28); border-radius: 999px;
  background: rgba(12, 16, 13, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none;
}
.entrada--foto .entrada__convite::after { display: none; }

/* o toldinho: listras creme e verde, borda recortada em meia-lua, inclinado pra fora. O JS cola ele em cima da vitrine */
.toldo {
  position: absolute; z-index: 2; height: clamp(46px, 8vh, 78px);
  transform: perspective(600px) rotateX(-22deg); transform-origin: 50% 0;
  filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .45));
}
.toldo__listras { position: absolute; inset: 0 0 20px; border-radius: 3px 3px 0 0; border-top: 5px solid #0f1611; background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%), repeating-linear-gradient(90deg, var(--toldo-creme) 0 32px, var(--toldo-verde) 32px 64px); }
.toldo__borda {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background:
    radial-gradient(circle at 16px 0, var(--toldo-creme) 0 16px, transparent 16.5px) 0 0 / 64px 20px repeat-x,
    radial-gradient(circle at 48px 0, var(--toldo-verde) 0 16px, transparent 16.5px) 0 0 / 64px 20px repeat-x;
}

/* lá dentro: a foto do box, que aparece quando a câmera atravessa o vidro */
.entrada__dentro { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.entrada__dentro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; transform: scale(1.15); }
.entrada__dentro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--preto) 0%, rgba(22, 30, 25, 0) 45%); }
.entrada__convite {
  position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); translate: -50% 0; z-index: 3;
  display: grid; justify-items: center; gap: 8px; text-align: center; white-space: nowrap;
  font: 600 11px/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--creme);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.entrada__convite span { color: var(--ouro-claro); letter-spacing: .3em; }
.entrada__convite::after { content: ''; width: 1px; height: 34px; background: linear-gradient(var(--ouro), transparent); animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* a abertura: um botão sobe, desabrocha em pétalas rosadas, elas douram e se fecham na tulipa do logo, e o logo
   se revela a partir da flor. Linha do tempo: haste 0 a .7 s, pétalas abrem até 1,9 s, douram e fecham até 2,7 s,
   logo e nome até 3,3 s, a cortina sai em 3,8 s. Rolar ou clicar antes pula (classe .pulou, no loja.js) */
@property --revela { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.entrada__abertura {
  position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 22px;
  background: radial-gradient(50% 45% at 50% 45%, rgba(188, 156, 99, .1), transparent 70%), var(--preto);
  pointer-events: none; animation: cortina .7s var(--ease) 3.8s forwards;
}
.entrada__abertura.pulou { animation: cortina .35s ease forwards; }
.abertura__logo { position: relative; width: min(64vw, 320px); aspect-ratio: 283 / 260; }
.abertura__marca, .abertura__flor { position: absolute; inset: 0; width: 100%; height: 100%; }
/* o logo de verdade aparece de dentro pra fora, a partir do miolo da flor */
.abertura__marca {
  -webkit-mask: radial-gradient(circle at 46% 31%, #000 var(--revela), transparent calc(var(--revela) + 14%));
  mask: radial-gradient(circle at 46% 31%, #000 var(--revela), transparent calc(var(--revela) + 14%));
  filter: drop-shadow(0 0 26px rgba(223, 199, 127, .3));
  animation: revela 1.1s var(--ease) 2.2s forwards;
}
@keyframes revela { to { --revela: 160%; } }
.abertura__flor { overflow: visible; }
.abertura__haste { fill: none; stroke: #6f8f5f; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: haste .7s var(--ease) .1s forwards, some .5s ease 2.2s forwards; }
@keyframes haste { to { stroke-dashoffset: 0; } }
.abertura__folha { fill: #6f8f5f; transform-box: fill-box; transform-origin: 100% 50%; transform: scale(0); animation: folha .5s var(--ease) .55s forwards, some .5s ease 2.2s forwards; }
@keyframes folha { to { transform: scale(1); } }
.petala {
  fill: var(--c); stroke: rgba(80, 20, 40, .25); stroke-width: .6;
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: rotate(0) scale(.15); opacity: 0;
  animation: desabrocha 2.2s cubic-bezier(.3, .6, .2, 1) calc(.55s + var(--i) * .07s) forwards;
}
@keyframes desabrocha {
  0% { transform: rotate(0) scale(.15); opacity: 0; fill: #8fae7c; }
  18% { transform: rotate(0) scale(.55); opacity: 1; fill: #b9d0a4; }
  58% { transform: rotate(var(--a)) scale(1.65); fill: var(--c); }
  80% { transform: rotate(calc(var(--a) * .42)) scale(.98); fill: #dfc77f; opacity: 1; }
  100% { transform: rotate(calc(var(--a) * .42)) scale(.92); fill: #dfc77f; opacity: 0; }
}
.abertura__miolo { fill: #dfc77f; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: miolo .9s var(--ease) 1.2s forwards; }
@keyframes miolo { 50% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
@keyframes some { to { opacity: 0; } }
.abertura__escrita { width: min(60vw, 230px); height: auto; opacity: 0; transform: translateY(10px); animation: nome .8s var(--ease) 2.8s forwards; }
@keyframes nome { to { opacity: 1; transform: none; } }
@keyframes cortina { to { opacity: 0; visibility: hidden; } }

@media (max-width: 760px) {
  .entrada { height: 220vh; }
  .fachada { grid-template-rows: 11cqh 1fr 22cqh; }
  .fachada__painel--box, .fachada__painel--estreito { display: none; }
  .fachada__parede { gap: 4cqw; }
  .fachada__painel--logo { width: 28cqw; padding: 5cqh 2cqw 0; }
  .fachada__mono { width: 86%; }
  .fachada__escrita { width: 96%; }
  .fachada__vidro { aspect-ratio: auto; width: 58cqw; max-width: none; }
  .toldo { height: 46px; }
  /* acima do selo de demonstração e do botão do WhatsApp. A faixa de aviso do topo empurra o palco uns 30px pra
     baixo da tela antes de rolar, por isso a folga maior */
  .entrada__convite { bottom: 112px; }
  .entrada__convite::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entrada { height: auto; }
  .entrada__palco { position: relative; top: 0; height: 80vh; }
  .entrada__abertura { display: none; }
  .entrada__convite::after { animation: none; }
}

/* ---------- a busca grande ---------- */
.procura { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--lateral) 0; }
.procura__in { padding: clamp(24px, 4vw, 56px); border: 1px solid var(--linha-forte); border-radius: var(--raio); background: radial-gradient(80% 120% at 100% 0%, rgba(188, 156, 99, .12), transparent 60%), var(--preto-2); }
.procura h2 { margin: 14px 0 24px; font: 400 clamp(28px, 3.3vw, 46px)/1.1 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.procura h2 em { font-size: 1.14em; }
.procura__campo { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 64px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--preto); transition: border-color .25s, box-shadow .25s; }
.procura__campo:focus-within { border-color: var(--ouro); box-shadow: 0 0 0 4px rgba(188, 156, 99, .14); }
.procura__campo .ico { color: var(--ouro); }
.procura__campo input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 18px; color: var(--creme); }
.procura__sugestoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--cinza); }
.procura__sugestoes button { min-height: 36px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 999px; background: none; font-size: 13.5px; color: var(--texto-2); }
.procura__sugestoes button:hover { border-color: var(--ouro); color: var(--creme); }
.procura__conta { margin-top: 20px; font-size: 14px; color: var(--texto-2); }
.procura__conta:empty { display: none; }
.procura__res { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.procura__res:empty { display: none; }
@media (max-width: 1080px) { .procura__res { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .procura__res { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .procura__campo { height: 56px; padding: 0 16px; }
  .procura__campo input { font-size: 16px; }
}

/* ---------- pra que é a flor ---------- */
.ocasioes__lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.ocasiao { position: relative; display: grid; align-content: end; gap: 4px; min-height: 200px; padding: 16px; text-align: left; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--preto-3); color: var(--creme); }
.ocasiao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); transition: transform 1s var(--ease), filter .5s; }
.ocasiao::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(12, 18, 14, .92), transparent); }
.ocasiao b, .ocasiao span { position: relative; z-index: 1; }
.ocasiao b { font: 400 17px/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .03em; }
.ocasiao span { font: 600 12.5px/1.3 var(--sans); color: var(--ouro-claro); }
.ocasiao:hover img { transform: scale(1.06); filter: brightness(.78); }
.ocasiao[aria-pressed="true"] { border-color: var(--ouro); box-shadow: inset 0 0 0 1px var(--ouro); }
@media (max-width: 1080px) {
  .ocasioes__lista { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .ocasioes__lista::-webkit-scrollbar { display: none; }
}
@media (max-width: 720px) {
  .ocasioes__lista { grid-auto-columns: 44%; margin: 0 calc(var(--lateral) * -1); padding: 0 var(--lateral); scroll-padding-left: var(--lateral); }
  .ocasiao { min-height: 168px; scroll-snap-align: start; }
}

/* ---------- estoque do JRS: no card, na ficha e na vitrine ---------- */
.sync { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--cinza); }
.sync__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulsa 2.2s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(156, 199, 154, .6); } 70% { box-shadow: 0 0 0 8px rgba(156, 199, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(156, 199, 154, 0); } }
.card--esgotado .card__foto img { filter: grayscale(.6) brightness(.72); }
.card__selo--esgotado { background: rgba(240, 144, 126, .16); color: var(--fora); border-color: rgba(240, 144, 126, .45); }
.card__selo--poucas { color: var(--ok); border-color: rgba(156, 199, 154, .45); }
.card__ver { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid var(--linha-forte); font: 600 12px/1.3 var(--sans); letter-spacing: .06em; color: var(--ouro-claro); }
.card__ver .ico { width: 14px; height: 14px; }
.card__chega { margin-top: 6px; font-size: 12.5px; color: var(--fora); }
.card.jrs-mudou .card__foto { animation: mudou 1.8s var(--ease); }
@keyframes mudou { 0% { box-shadow: 0 0 0 0 rgba(223, 199, 127, 0); } 25% { box-shadow: 0 0 0 4px rgba(223, 199, 127, .6); } 100% { box-shadow: 0 0 0 0 rgba(223, 199, 127, 0); } }
.ficha__estoque { margin: 6px 0 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ok); }
.ficha__estoque::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ficha__estoque--fora { color: var(--fora); }
.ficha__estoque:empty { display: none; }
.ficha__trava { display: grid; gap: 10px; margin-bottom: 14px; padding: 18px; border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: rgba(188, 156, 99, .05); }
.ficha__trava p { font-size: 14px; color: var(--texto-2); }
.ficha__trava .btn { justify-self: start; }
.ficha__parecidos:empty { display: none; }
.ficha__parecidos { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linha); }
.ficha__parecidos h3 { margin-bottom: 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ouro); }
.ficha__parecidos > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ficha__parecidos .mini span { font-size: 12.5px; }

/* ---------- o cadastro rápido ---------- */
.cadastro { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border-radius: var(--raio); border: 1px solid var(--linha-forte); }
.cadastro__in { position: relative; display: grid; gap: 14px; padding: 36px 34px 30px; background: radial-gradient(100% 60% at 50% 0%, rgba(188, 156, 99, .14), transparent 70%); }
.cadastro .fechar { position: absolute; top: 10px; right: 10px; }
.cadastro__mono { width: 58px; height: auto; }
.cadastro h2 { font: 400 25px/1.15 var(--titulo); text-transform: uppercase; letter-spacing: .02em; }
.cadastro h2 em { display: block; font-size: 1.14em; }
.cadastro__txt { color: var(--texto-2); font-size: 15px; }
.cadastro .campo { margin: 0; }
.cadastro label small { color: var(--cinza); font-weight: 400; text-transform: none; letter-spacing: 0; }
.cadastro__aceite { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--texto-2); cursor: pointer; }
.cadastro__aceite input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ouro); }
.cadastro__nota { font-size: 12.5px; color: var(--cinza); text-align: center; }
@media (max-width: 560px) { .cadastro__in { padding: 30px 22px 24px; } }

/* ---------- orçamento e painel de demonstração ---------- */
.gaveta__futuro { margin-top: 4px; font-size: 12.5px; color: var(--cinza); }
.painel-demo__apoio { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14.5px; color: var(--texto-2); }
.jrs { display: grid; gap: 8px; }
.jrs .btn { justify-content: flex-start; text-align: left; letter-spacing: .04em; text-transform: none; font-size: 13.5px; font-weight: 600; }
.jrs .btn-link { justify-self: start; }
.jrs__res { margin-top: 12px; min-height: 1.4em; font-size: 14px; color: var(--ok); }
.painel-demo__lista.gargalos li { display: grid; gap: 3px; }
.painel-demo__lista.gargalos b { font: 600 15px/1.35 var(--sans); color: var(--creme); }

/* ---------- sem itálico decorativo ----------
   A segunda metade do título em serifa itálica dourada é o vício de site feito por IA (Gabriel, 29/10).
   O título fica inteiro na Literata, e o destaque, quando existe, é só o peso e a cor do próprio título. */
h1 em, h2 em, .hero h1 em, .bloco__topo h2 em, .insta h2 em, .fe h2 em, .banho h2 em, .entrega h2 em, .elos h2 em,
.tipos h2 em, .procura h2 em, .cadastro h2 em, .painel-demo h2 em {
  display: inline; font: inherit; font-size: 1em; letter-spacing: inherit; text-transform: inherit; color: inherit;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
}
.rodape__marca p { font: 400 14px/1.5 var(--sans); color: var(--texto-2); }
/* a frase da placa do box, escrita como na placa: caixa alta, sem serifa */
.tipo .tipo__placa { font: 700 11.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-claro); }