/* --------------------------------------------------------------------------
   01. A operação: fonte/secoes/operacao.php

   Capítulo escuro e curto (--sup-1) logo depois do herói. Não desenha divisa
   nenhuma: a sombra da borda de baixo é deduzida pela vizinhança em site.css.
   Duas camadas: a atmosfera (foto do pátio sangrando pela direita, em deriva,
   com véu de token para o contraste) e o conteúdo (chamada à esquerda e o
   painel de vidro com trilho e três nós, lido como diagrama).
   -------------------------------------------------------------------------- */
.secao-operacao {
  background: var(--sup-1);
}

/* `clip` recorta sem criar scrollport: com `hidden` as timelines de view()
   das classes .mov-* mediriam esta caixa e o movimento congelaria. */
.operacao-atmosfera {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

.operacao-arte {
  --mov-forca: 3%;
  position: absolute;
  top: 0;
  left: -4%;
  width: 108%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(86% 124% at 74% 46%, var(--texto), transparent 72%);
  mask-image: radial-gradient(86% 124% at 74% 46%, var(--texto), transparent 72%);
  -webkit-mask-image: radial-gradient(86% 124% at 74% 46%, var(--texto) 0%, color-mix(in srgb, var(--texto) 62%, transparent) 44%, transparent 78%);
  mask-image: radial-gradient(86% 124% at 74% 46%, var(--texto) 0%, color-mix(in srgb, var(--texto) 62%, transparent) 44%, transparent 78%);
}

.operacao-veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--sup-1) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 68%, var(--sup-1) 100%);
  background:
    linear-gradient(to right, var(--sup-1) 0%, color-mix(in srgb, var(--sup-1) 86%, transparent) 26%, transparent 58%),
    linear-gradient(to bottom, var(--sup-1) 0%, transparent 18%, transparent 68%, var(--sup-1) 100%);
}

.operacao-halo {
  --mov-opacidade-min: 0.35;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 52% at 72% 46%, var(--acento-vidro), transparent 72%);
}

/* --- Composição ---------------------------------------------------------- */
.operacao-conteudo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--esp-bloco) var(--esp-grid);
  align-items: center;
}

.operacao-chamada {
  margin: var(--e4) 0 0;
  font-size: var(--t3);
  line-height: 1.1;
}

.operacao-apoio {
  margin: var(--e5) 0 var(--e5);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

/* --- Painel de vidro ------------------------------------------------------
   78% de --sup-2 sobre o pixel mais claro da foto deixa --suave acima de 5:1. */
.operacao-faixa {
  display: grid;
  gap: var(--e6);
  border-radius: var(--r-xl);
  background: var(--sup-2);
  background: color-mix(in srgb, var(--sup-2) 78%, transparent);
  box-shadow: var(--sombra-3);
}

.operacao-trilho {
  height: 1px;
  background: linear-gradient(to right, var(--acento-linha), var(--borda-forte) 58%, transparent);
}

.operacao-trilhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.operacao-trilha {
  position: relative;
}

/* O nó de cada trilha pendura no trilho: --e6 de volta, --e1 para centrar. */
.operacao-trilha::before {
  content: "";
  position: absolute;
  top: calc((var(--e6) + var(--e1)) * -1);
  left: 0;
  width: var(--e2);
  height: var(--e2);
  border-radius: var(--r-full);
  background: var(--acento);
  box-shadow: 0 0 0 var(--e1) var(--acento-vidro);
}

.operacao-trilha-rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e5);
}

.operacao-trilha-rotulo .icone {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--acento);
}

.operacao-itens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.operacao-itens > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2);
}

.operacao-itens > li + li {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
}

.operacao-nome {
  color: var(--texto);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.4;
}

.operacao-item--acento .operacao-nome {
  color: var(--acento);
}

.operacao-papel {
  flex-basis: 100%;
  margin-top: var(--e1);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.65;
}

.operacao-nota {
  margin: 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.8;
}

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

/* --- Responsivo: 1200 / 980 / 680 / 380 ---------------------------------- */
@media (max-width: 1200px) {
  .operacao-conteudo {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }

  .operacao-trilhas {
    gap: var(--e6);
  }
}

@media (max-width: 980px) {
  .operacao-conteudo {
    grid-template-columns: minmax(0, 1fr);
  }

  .operacao-veu {
    background: linear-gradient(to bottom, var(--sup-1) 0%, transparent 34%, transparent 68%, var(--sup-1) 100%);
    background: linear-gradient(to bottom, var(--sup-1) 0%, color-mix(in srgb, var(--sup-1) 78%, transparent) 30%, transparent 66%, var(--sup-1) 100%);
  }
}

@media (max-width: 680px) {
  .operacao-trilhas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }

  .operacao-trilha + .operacao-trilha {
    padding-top: var(--e5);
    border-top: 1px solid var(--borda);
  }

  .operacao-trilha + .operacao-trilha::before {
    top: calc(var(--e1) * -1);
  }

  .operacao-arte {
    opacity: 0.4;
  }

  .operacao-faixa {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 380px) {
  .operacao-faixa {
    gap: var(--e5);
    padding: var(--e5);
  }
}