/* --------------------------------------------------------------------------
   06. Lucro por chassi: fonte/secoes/lucro.php

   Capítulo de papel, porta da peça tipográfica de custos do molde. A âncora
   é uma folha um degrau acima do papel com malha em parallax; à esquerda o
   número grande (lucro do exemplo), à direita a régua que desconta cada
   parcela da margem bruta. As larguras das fatias moram aqui, por classe,
   para o HTML não carregar style. Tudo em tokens: o .em-papel já reescreve
   --texto, --suave, --borda, --sup-* e o acento para o claro.
   -------------------------------------------------------------------------- */
.lucro-ancora {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: center;
  overflow: hidden;
  overflow: clip;
  padding: var(--e8) var(--e7);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 6% 4%, var(--acento-vidro), transparent 62%),
    var(--sup-2);
  box-shadow: var(--sombra-2);
}

.lucro-malha {
  --mov-forca: 2.5%;
  position: absolute;
  z-index: 0;
  inset: -8%;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, var(--borda) 0 1px, transparent 1px var(--e8)),
    repeating-linear-gradient(var(--borda) 0 1px, transparent 1px var(--e8));
  -webkit-mask-image: radial-gradient(72% 96% at 14% 50%, var(--texto), transparent);
  mask-image: radial-gradient(72% 96% at 14% 50%, var(--texto), transparent);
  pointer-events: none;
}

.lucro-ancora > div {
  position: relative;
  z-index: 1;
}

.lucro-ancora-texto .selo {
  margin-bottom: var(--e4);
}

.lucro-ancora-texto .sobretitulo {
  display: block;
  margin-bottom: var(--e4);
  color: var(--acento);
}

.lucro-numero {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  color: var(--texto);
  font-family: var(--titulo);
  font-size: calc(var(--t1) * 1.15);
  font-weight: var(--p-max);
  letter-spacing: var(--tk1);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.lucro-numero-sinal {
  color: var(--acento);
  font-size: var(--t3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.1;
}

.lucro-ancora-titulo {
  margin-top: var(--e4);
  color: var(--texto);
  font-size: var(--t4);
  font-weight: var(--p-medio);
  letter-spacing: var(--tk3);
  line-height: 1.35;
  max-width: 26ch;
}

.lucro-ancora-texto > p:last-child {
  max-width: 46ch;
  margin-top: var(--e5);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.85;
}

.lucro-ancora-regua .sobretitulo {
  display: block;
  margin-bottom: var(--e5);
}

.lucro-regua {
  display: grid;
  gap: var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lucro-regua > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--e2) var(--e4);
}

.lucro-regua-rotulo {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.4;
}

.lucro-regua-rotulo small {
  display: block;
  color: var(--suave);
  font-size: var(--c4);
  font-weight: var(--p-normal);
  letter-spacing: normal;
  line-height: 1.6;
}

.lucro-regua-valor {
  color: var(--suave);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.lucro-regua-barra {
  grid-column: 1 / -1;
  overflow: hidden;
  overflow: clip;
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--sup-3);
}

.lucro-regua-fatia {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--borda-forte), var(--suave));
  transform-origin: left center;
}

/* Proporções da conta ilustrativa sobre a margem bruta (R$ 10.900). */
.lucro-fatia--1 { width: 100%; }
.lucro-fatia--2 { width: 21%; }
.lucro-fatia--3 { width: 11%; }
.lucro-fatia--4 { width: 6%; }
.lucro-fatia--5 { width: 2%; }
.lucro-fatia--6 { width: 61%; }

.lucro-regua-bruta .lucro-regua-valor {
  color: var(--texto);
  text-decoration: line-through;
  text-decoration-color: var(--erro);
  text-decoration-thickness: 2px;
}

.lucro-regua-bruta .lucro-regua-fatia {
  background: linear-gradient(90deg, var(--borda-forte), var(--tenue));
}

.lucro-regua-final {
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.lucro-regua-final .lucro-regua-valor {
  color: var(--texto);
  font-weight: var(--p-max);
}

.lucro-regua-final .lucro-regua-fatia {
  background: linear-gradient(90deg, var(--acento), var(--acento-brilho));
}

.lucro-ancora-regua .nota {
  margin-top: var(--e6);
}

.lucro-ancora-regua .nota strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

.lucro-grade {
  margin-top: var(--esp-bloco);
}

.lucro-bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  overflow: hidden;
  overflow: clip;
  border-radius: var(--r-xl);
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-3) var(--ease-saida);
}

.lucro-bloco::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--acento-linha), transparent 70%);
  pointer-events: none;
}

.lucro-bloco:hover {
  border-color: var(--borda-forte);
  transform: translateY(-2px);
}

.lucro-bloco .sobretitulo {
  margin-top: var(--e2);
  color: var(--acento);
}

.lucro-bloco h3 {
  margin-top: calc(var(--e3) * -1);
}

.lucro-bloco > p {
  font-size: var(--c3);
  line-height: 1.85;
}

.lucro-bloco .lista-marcada {
  margin-top: auto;
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

@media (max-width: 1200px) {
  .lucro-ancora {
    padding: var(--e7) var(--e6);
  }
}

@media (max-width: 980px) {
  .lucro-ancora {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .lucro-ancora-titulo,
  .lucro-ancora-texto > p:last-child {
    max-width: 52ch;
  }
}

@media (max-width: 680px) {
  .lucro-ancora {
    padding: var(--e5);
    border-radius: var(--r-lg);
  }

  .lucro-numero {
    font-size: var(--t1);
  }
}

@media (max-width: 380px) {
  .lucro-ancora {
    padding: var(--e4);
  }

  .lucro-regua > li {
    grid-template-columns: minmax(0, 1fr);
  }

  .lucro-regua-valor {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lucro-bloco {
    transition: none;
  }

  .lucro-bloco:hover {
    transform: none;
  }
}