/* --------------------------------------------------------------------------
   Custo sob controle: componentes/custos.php

   Capitulo escuro (--sup-0) entre dois claros: #operacao acima, #seguranca
   abaixo. As duas divisas sao deduzidas pela vizinhanca em css/site.css
   (secao 05). Nao existe aqui nenhuma sangria, gradiente de transicao ou fio
   de borda de secao, e nada disso pode voltar a existir: duplicar a divisa e
   o artefato que o cliente reclamou.

   A secao nao tem fotografia. A peca forte e tipografica: o desconto anual em
   corpo grande com uma regua de comparacao ao lado. Arte construida no resto:
   malha de prancha tecnica, fios que se desenham, sem nenhuma imagem.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Ancora: o numero grande e a regua de comparacao
   -------------------------------------------------------------------------- */
.custos-ancora {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: center;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  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(--verde-vidro), transparent 62%),
    var(--sup-2);
  box-shadow: var(--sombra-3);
}

/* A malha e a unica "imagem" da secao: prancha tecnica desenhada em gradiente,
   com parallax de forca baixa para o fundo nao ficar colado no texto. */
.custos-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;
}

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

.custos-ancora-texto .sobretitulo {
  color: var(--verde);
}

.custos-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: 24ch;
}

/* O numero: o unico elemento da secao que se le a tres metros de distancia. */
.custos-numero {
  display: flex;
  align-items: flex-start;
  gap: var(--e1);
  margin-bottom: 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;
}

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

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

/* --- 1.1 Regua de comparacao --------------------------------------------- */
.custos-ancora-regua .sobretitulo {
  margin-bottom: var(--e5);
}

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

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

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

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

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

.custos-regua-barra {
  grid-column: 1 / -1;
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--sup-3);
}

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

/* A linha do anual e a que interessa: valor em --texto e fatia no acento. */
.custos-regua-anual .custos-regua-valor {
  color: var(--texto);
  font-weight: var(--p-max);
}

.custos-regua-anual .custos-regua-fatia {
  background: linear-gradient(90deg, var(--verde), var(--verde-brilho));
}

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

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

.custos-ancora-link {
  margin-top: var(--e5);
}

/* --------------------------------------------------------------------------
   2. Os tres mecanismos de medicao
   -------------------------------------------------------------------------- */
.custos-grade {
  margin-top: var(--esp-bloco);
}

.custos-bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  /* clip, e nao hidden: `hidden` cria scrollport e as timelines de view()
     daqui para dentro passam a medir esta caixa, que nunca rola, e o
     movimento congela. Nota longa em css/sec-conexoes.css. */
  overflow: hidden;
  overflow: clip;
  border-radius: var(--r-xl);
  transition:
    border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* Fio de acento no topo do cartao. Nao confundir com divisa de secao: e a
   aresta do proprio cartao, dentro do container. */
.custos-bloco::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--verde-linha), transparent 70%);
  pointer-events: none;
}

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

.custos-bloco .sobretitulo {
  margin-top: var(--e2);
  color: var(--verde);
}

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

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

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

/* --------------------------------------------------------------------------
   3. Fecho: o que roda local e nao gera fatura por uso

   Bloco aberto, sem casca de cartao: depois da ancora e da grade, mais uma
   caixa seria a terceira moldura seguida. O que separa e o fio que se desenha.
   -------------------------------------------------------------------------- */
.custos-local {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--esp-grid);
  align-items: center;
  margin-top: var(--esp-bloco);
  padding-top: var(--esp-bloco);
}

.custos-fio {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--verde-linha),
    var(--borda-forte) 40%,
    transparent
  );
  transform-origin: left center;
  pointer-events: none;
}

.custos-local-texto .sobretitulo {
  color: var(--verde);
}

.custos-local-texto h3 {
  margin: var(--e4) 0;
  color: var(--texto);
  font-size: var(--t3);
  letter-spacing: var(--tk2);
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.custos-local-texto p:not([class]) {
  max-width: 62ch;
  font-size: var(--c3);
  line-height: 1.85;
}

.custos-local-texto .nota {
  margin-top: var(--e4);
}

.custos-local-texto strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

.custos-local-marcas {
  display: grid;
  gap: var(--e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.custos-local-marcas > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--e4);
  row-gap: var(--e1);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--sup-2);
  transition:
    border-color var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}

.custos-local-marcas > li:hover {
  border-color: var(--borda-forte);
  background: var(--sup-3);
}

.custos-local-marcas .icone {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  color: var(--verde);
}

.custos-local-marcas strong {
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
}

.custos-local-marcas span {
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Responsivo: 1200 / 980 / 680 / 380
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .custos-ancora {
    padding: var(--e7) var(--e6);
  }

  .custos-regua {
    gap: var(--e5);
  }
}

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

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

  .custos-local-marcas {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
}

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

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

  .custos-regua-valor {
    font-size: var(--t5);
  }

  .custos-local-texto h3 {
    font-size: var(--t4);
    letter-spacing: var(--tk3);
  }
}

@media (max-width: 380px) {
  .custos-ancora,
  .custos-local-marcas > li {
    padding: var(--e4);
  }

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

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