/* Como funciona em bento (modelo bento-grid, 21st.dev): 4 colunas no PC, os cards largos ocupam 2.
   Cada card tem uma mini-tela montada em HTML com números reais da /calculadora, nada de print.
   bento.js revela em sequência (revela-custo.js) e acende a borda onde o mouse está.
   Card no modelo escolhido pelo dono: mídia bordô em cima e painel creme embaixo, que sobe por cima da mídia num arco. */
.bento {
  --bento-fundo: var(--acento);
  --bento-borda: rgba(247, 228, 199, 0.12);
  --bento-midia: radial-gradient(120% 100% at 50% 0%, #7a1620 0%, #5f0c14 60%, var(--acento) 100%);
  --bento-painel: var(--creme);
  --bento-titulo: var(--acento);
  --bento-texto: var(--texto-suave);
  --bento-arco: 26px;
  --mini-sombra: 0 22px 44px -20px rgba(20, 2, 4, 0.6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.bento-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bento-borda);
  border-radius: var(--raio-g);
  background: var(--bento-fundo);
  transition: box-shadow 0.3s ease;
}

.bento-largo {
  grid-column: span 2;
}

/* Borda e brilho que seguem o mouse (bento.js escreve --mx e --my). */
.bento-card::before,
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Acima da mídia e do painel, senão os dois fundos escondem a borda acesa. */
.bento-card::before {
  z-index: 3;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(247, 228, 199, 0.65), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.bento-card::after {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(247, 228, 199, 0.07), transparent 70%);
}

.bento-card:hover {
  box-shadow: 0 26px 50px -26px rgba(40, 5, 8, 0.6);
}

.bento-card:hover::before,
.bento-card:hover::after {
  opacity: 1;
}

/* isolation: os z-index das mini-telas (leque dos salvos) não passam por cima do painel. */
.bento-visual {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 28px 24px calc(28px + var(--bento-arco));
  background: var(--bento-midia);
}

.bento-texto {
  position: relative;
  margin-top: calc(-1 * var(--bento-arco));
  padding: 30px 24px 24px;
  border-radius: 50% 50% 0 0 / var(--bento-arco) var(--bento-arco) 0 0;
  background: var(--bento-painel);
  box-shadow: 0 -14px 28px -18px rgba(20, 2, 4, 0.6);
}

.bento-texto h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--bento-titulo);
}

.bento-texto p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bento-texto);
}

/* Mini-telas: pedaços da /calculadora redesenhados em HTML. */
.mini-janela {
  width: min(100%, 300px);
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--branco);
  color: var(--texto);
  box-shadow: var(--mini-sombra);
  font-size: 13px;
  line-height: 1.35;
}

.mini-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.bento-visual strong {
  font-family: var(--fonte-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.mini-cabeca {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linha);
  font-weight: 600;
}

.mini-linha {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.mini-verde {
  color: var(--verde);
}

.mini-vermelho {
  color: var(--vermelho);
}

.mini-ambar {
  color: var(--amarelo);
}

/* Kit */
.mini-kit {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 540px;
}

.mini-kit .mini-janela {
  flex: 1.2;
}

.mini-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-lista li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}

.mini-lista em {
  font-style: normal;
  font-weight: 600;
  color: var(--acento);
}

/* O terceiro item some embaixo, como a lista cortada da tela real. */
.mini-lista .mini-some {
  border-bottom: 0;
  padding-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.mini-resultado {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  border-radius: 16px;
  background: #171717;
  color: var(--branco);
  box-shadow: var(--mini-sombra);
}

.mini-resultado .mini-rotulo {
  color: rgba(255, 255, 255, 0.6);
}

.mini-resultado strong {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
}

.mini-apoio {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.mini-resultado .mini-lucro {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #32d583;
}

/* Balcão ou app: o seletor alterna sozinho e o preço troca junto. */
.mini-canal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.mini-segmento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 250px);
  padding: 4px;
  border-radius: 999px;
  background: var(--branco);
  box-shadow: var(--mini-sombra);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.mini-segmento::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--acento);
  animation: canal-indicador 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.mini-segmento span {
  position: relative;
  padding: 8px 6px;
  color: var(--creme);
  animation: canal-rotulo-a 6s infinite;
}

.mini-segmento span + span {
  color: var(--texto-suave);
  animation-name: canal-rotulo-b;
}

.mini-precos {
  text-align: center;
}

.mini-troca-caixa {
  display: grid;
}

.mini-troca {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: canal-a 6s infinite;
}

.mini-troca + .mini-troca {
  opacity: 0;
  animation-name: canal-b;
}

.mini-troca strong {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--acento);
}

.mini-precos .mini-linha {
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
}

@keyframes canal-indicador {
  0%,
  42%,
  100% {
    transform: none;
  }

  50%,
  92% {
    transform: translateX(100%);
  }
}

@keyframes canal-rotulo-a {
  0%,
  42%,
  100% {
    color: var(--creme);
  }

  50%,
  92% {
    color: var(--texto-suave);
  }
}

@keyframes canal-rotulo-b {
  0%,
  42%,
  100% {
    color: var(--texto-suave);
  }

  50%,
  92% {
    color: var(--creme);
  }
}

@keyframes canal-a {
  0%,
  42%,
  100% {
    opacity: 1;
    transform: none;
  }

  50%,
  92% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes canal-b {
  0%,
  42%,
  100% {
    opacity: 0;
    transform: translateY(6px);
  }

  50%,
  92% {
    opacity: 1;
    transform: none;
  }
}

/* Contas do mês: barras na proporção de cada conta, crescem quando o card aparece. */
.mini-selo {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--amarelo-suave);
  color: var(--amarelo);
  font-size: 12px;
}

.mini-barras {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mini-barras li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
}

.mini-barras i {
  position: relative;
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--acento-suave);
}

.mini-barras i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--acento);
  transform: scaleX(var(--parte));
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.revela-espera .mini-barras i::after {
  transform: scaleX(0);
}

/* Promoção (promo-mini.js escreve --pos, de 0 a 1 = 0% a 50% de desconto). */
.mini-trilho {
  --pos: 0.2;
  position: relative;
  height: 6px;
  margin: 18px 4px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde) 0 20%, #e2b48f 20% 62%, #e6a3a3 62%);
  cursor: grab;
  /* Deixa a página rolar na vertical e entrega o arraste horizontal para o script. */
  touch-action: pan-y;
}

.mini-trilho.arrastando {
  cursor: grabbing;
}

/* Área de toque maior que os 6px da barra. */
.mini-trilho::before {
  content: "";
  position: absolute;
  inset: -14px -4px;
}

/* Véu sobre o trecho ainda não escolhido: o gradiente das faixas vira barra de progresso (igual ao slider do app). */
.mini-trilho::after {
  content: "";
  position: absolute;
  inset: 0 0 0 calc(var(--pos) * 100%);
  border-radius: 0 999px 999px 0;
  background: rgba(255, 255, 255, 0.62);
  transition: left 0.15s linear;
}

.mini-pino {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(var(--pos) * 100%);
  width: 18px;
  height: 18px;
  border: 3px solid var(--acento);
  border-radius: 50%;
  background: var(--branco);
  transform: translate(-50%, -50%);
  transition: left 0.15s linear;
}

.mini-trilho.arrastando .mini-pino,
.mini-trilho.arrastando::after {
  transition: none;
}

.revela-espera .mini-pino {
  left: 0;
}

.mini-faixas {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.mini-faixas span:first-child {
  color: var(--verde);
}

.mini-faixas span:nth-child(2) {
  color: var(--amarelo);
}

.mini-faixas span:last-child {
  color: var(--vermelho);
}

.mini-selo-verde {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: 12px;
  font-weight: 600;
}

.mini-selo-verde[data-estado="reduzido"] {
  background: var(--amarelo-suave);
  color: var(--amarelo);
}

.mini-selo-verde[data-estado="prejuizo"] {
  background: var(--vermelho-suave);
  color: var(--vermelho);
}

/* Troca de faixa do selo (promo-mini.js, PROMO_SELO_MS): o antigo sai subindo e o novo entra vindo de baixo. */
.mini-selo-verde.selo-sai {
  animation: selo-sai 0.2s ease-out forwards;
}

.mini-selo-verde.selo-entra {
  animation: selo-entra 0.2s ease-out;
}

@keyframes selo-sai {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@keyframes selo-entra {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

/* Meta do mês */
.mini-meta {
  text-align: center;
}

.mini-grande {
  display: block;
  margin: 6px 0 2px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.mini-meta .mini-apoio {
  color: var(--texto-suave);
}

.mini-progresso {
  height: 4px;
  margin: 14px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--acento-suave);
}

.mini-progresso i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--acento);
  transform: scaleX(var(--parte));
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.revela-espera .mini-progresso i {
  transform: scaleX(0);
}

.mini-alerta {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--amarelo-suave);
  color: var(--amarelo);
  font-size: 12.5px;
}

/* Meta ao vivo (meta-mini.js): a meta é digitada, os pedidos contam e a barra e o aviso acompanham. */
.mini-meta .mini-grande {
  font-variant-numeric: tabular-nums;
}

.mini-meta-valor {
  color: var(--texto);
  font-weight: 600;
}

.mini-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  /* Margem negativa devolve a largura do cursor: apagado, ele não abre vão antes do "no mês". */
  margin: 0 -2.5px 0 1px;
  vertical-align: -0.15em;
  background: var(--acento);
  opacity: 0;
}

.mini-meta.digitando .mini-cursor {
  animation: cursor-pisca 0.9s steps(1) infinite;
}

@keyframes cursor-pisca {
  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

/* Sem o atraso da revelação: a barra segue a contagem. */
.mini-meta[data-estado] .mini-progresso i {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.mini-meta[data-estado="ok"] .mini-progresso i {
  background: var(--verde);
}

.mini-meta[data-estado="ok"] .mini-alerta {
  background: var(--verde-suave);
  color: var(--verde);
}

.mini-alerta.selo-entra {
  animation: selo-entra 0.2s ease-out;
}

/* Produtos salvos: leque de cards com foto e as pastas embaixo, como na /calculadora. */
.mini-salvos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.mini-leque {
  position: relative;
  width: 100%;
  height: 196px;
}

.mini-sim {
  --leque-x: 0px;
  --leque-giro: 0deg;
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 1;
  width: 150px;
  padding-bottom: 12px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--branco);
  color: var(--texto);
  box-shadow: var(--mini-sombra);
  font-size: 11px;
  transform: translateX(calc(-50% + var(--leque-x))) rotate(var(--leque-giro));
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.mini-sim-a {
  --leque-x: -118px;
  --leque-giro: -8deg;
}

.mini-sim-b {
  top: 0;
  z-index: 2;
  width: 162px;
}

.mini-sim-c {
  --leque-x: 118px;
  --leque-giro: 8deg;
}

.bento-card:hover .mini-sim-a {
  --leque-x: -138px;
  --leque-giro: -11deg;
}

.bento-card:hover .mini-sim-c {
  --leque-x: 138px;
  --leque-giro: 11deg;
}

/* Foto genérica como a do app sem imagem: gradiente com um prato ao centro. As cores vêm de --foto-1/--foto-2,
   que o salvos-mini.js troca a cada pasta; os valores daqui são os da pasta Bolos (HTML sem JS). */
.mini-foto {
  display: block;
  height: 70px;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.45) 0 13px, rgba(255, 255, 255, 0.18) 14px 24px, transparent 25px),
    linear-gradient(135deg, var(--foto-1, #e9a08f), var(--foto-2, #b85c52));
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mini-sim-b .mini-foto {
  height: 78px;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.45) 0 14px, rgba(255, 255, 255, 0.18) 15px 26px, transparent 27px),
    linear-gradient(135deg, var(--foto-1, #eab0c4), var(--foto-2, #b04a6f));
}

.mini-sim-c .mini-foto {
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.45) 0 13px, rgba(255, 255, 255, 0.18) 14px 24px, transparent 25px),
    linear-gradient(135deg, var(--foto-1, #a9c4b4), var(--foto-2, #4f7a66));
}

/* Troca de pasta ou de card do meio: os três descem e somem, o conteúdo troca e eles voltam. */
.mini-leque.trocando .mini-sim {
  opacity: 0;
  transform: translateX(calc(-50% + var(--leque-x))) translateY(12px) rotate(var(--leque-giro));
}

/* Card do meio aberto: a foto encolhe e aparece a linha do custo, que é digitada. */
.mini-sim-b.aberto .mini-foto {
  height: 48px;
}

.mini-sim .mini-sim-custo {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.mini-sim-b.aberto .mini-sim-custo {
  max-height: 20px;
  opacity: 1;
}

.mini-sim.digitando .mini-cursor {
  animation: cursor-pisca 0.9s steps(1) infinite;
}

.mini-sim-novo {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--verde-suave);
  color: var(--verde);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  opacity: 0;
}

.mini-sim-novo.visivel {
  opacity: 1;
  animation: selo-entra 0.2s ease-out;
}

.mini-salvos.interativo .mini-sim,
.mini-salvos.interativo .mini-pastas span {
  cursor: pointer;
}

.mini-sim b {
  display: block;
  padding: 8px 10px 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}

.mini-sim span {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0 10px;
  color: var(--texto-suave);
}

.mini-sim span strong {
  font-size: 12.5px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini-sim span .mini-verde {
  color: var(--verde);
}

/* O valor digitado do custo fica no meio do texto, fora da linha flexível do .mini-sim span. */
.mini-sim [data-custo] {
  display: inline;
  padding: 0;
  color: inherit;
}

/* Trilho arrastável com o dedo (sem barra visível): antes, depois de rolar até o fim, as primeiras pastas
   ficavam fora do alcance e não dava mais para selecioná-las. */
.mini-pastas {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}

.mini-pastas::-webkit-scrollbar {
  display: none;
}

.mini-pastas.no-fim {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%);
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}

.mini-pastas.no-meio {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.mini-pastas span {
  --cor-pasta: var(--texto-suave);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--branco);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
}

.mini-pastas span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-pasta);
}

.mini-pastas small {
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
}

/* Pasta ativa em creme: o bordô do app sumiria no card bordô. */
.mini-pastas .ativa {
  background: var(--creme);
  color: var(--acento);
}

.mini-pastas .ativa::before {
  display: none;
}

.mini-pastas .ativa small {
  color: var(--acento);
}

.mini-pastas span:nth-child(2) { --cor-pasta: #e8a33d; }
.mini-pastas span:nth-child(3) { --cor-pasta: #57b36d; }
.mini-pastas span:nth-child(4) { --cor-pasta: #48a9c5; }
.mini-pastas span:nth-child(5) { --cor-pasta: #9a6ad8; }

@media (max-width: 1000px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pilha no celular (pilha-rolagem.js): cada card gruda perto do topo e o seguinte sobe por cima.
   Sticky puro, o script só escreve top e margens. */
@media (max-width: 900px) {
  .pilha-on.pilha-on {
    display: block;
  }

  .pilha-on .bento-card {
    position: sticky;
    box-shadow: 0 -12px 32px -10px rgba(30, 4, 6, 0.5);
  }

  /* Sticky só anda dentro do pai: este espaço segura a pilha completa por um trecho antes de soltar. */
  .pilha-on.pilha-on::after {
    content: "";
    display: block;
    height: 30vh;
  }
}

/* Grade do PC: mídia e painel dos cards da mesma linha dividem as mesmas alturas, então o arco fica alinhado.
   Fica fora da pilha do celular (até 900px): com o pai em block, o subgrid corta a mídia na altura errada. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .bento-card {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

@media (max-width: 600px) {
  .bento {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }

  .bento-largo {
    grid-column: auto;
  }

  .bento-visual {
    min-height: 200px;
  }

  .mini-kit {
    flex-direction: column;
    align-items: stretch;
  }

  .mini-kit .mini-janela {
    width: 100%;
  }

  .mini-sim {
    width: 132px;
  }

  .mini-sim-b {
    width: 144px;
  }

  .mini-sim-a,
  .bento-card:hover .mini-sim-a {
    --leque-x: -92px;
  }

  .mini-sim-c,
  .bento-card:hover .mini-sim-c {
    --leque-x: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-segmento::before,
  .mini-segmento span,
  .mini-troca {
    animation: none;
  }

  .mini-barras i::after,
  .mini-pino,
  .mini-progresso i,
  .mini-sim {
    transition: none;
  }
}