/* Janela de inscrições (#planos): dois relógios, o da abertura e o do fechamento.
   O painel da fase ativa inverte para o vinho, como o card Premium: a hierarquia é dita
   pela cor. A trilha embaixo mostra quanto da janela já passou. */

.janela {
  --j-pad: clamp(1.2rem, 3vw, 2rem);
  margin: 0 0 1rem;
  padding: .5rem .5rem clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.janela-paineis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.janela-painel {
  --j-ink: var(--text);
  --j-quiet: var(--muted);
  --j-accent: var(--wine);
  min-width: 0;
  padding: var(--j-pad);
  border-radius: calc(var(--radius-md) - 4px);
  color: var(--j-ink);
}

.janela-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.15;
}

.janela-data { margin: .35rem 0 0; color: var(--j-quiet); font-size: .86rem; }

.janela-tempo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .4rem;
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.janela-tempo b {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}

.janela-tempo small {
  margin-right: .55rem;
  color: var(--j-quiet);
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .08em;
}

.janela-tempo small:last-child { margin-right: 0; }

.janela-painel[hidden],
.janela-data[hidden],
.janela-tempo[hidden] { display: none; }

/* Depois do fechamento sobra um painel só, em largura cheia. */
.janela[data-fase="encerrada"] .janela-paineis { grid-template-columns: 1fr; }

/* Fase ativa: fundo vinho, segundos em ouro. */
.janela[data-fase="antes"] .janela-painel[data-alvo="abre"],
.janela[data-fase="aberta"] .janela-painel[data-alvo="fecha"] {
  --j-ink: #f7f3e8;
  --j-quiet: rgb(247 243 232 / 74%);
  --j-accent: var(--gold);
  background: var(--wine);
}

.janela[data-fase="antes"] .janela-painel[data-alvo="abre"] [data-un="s"],
.janela[data-fase="aberta"] .janela-painel[data-alvo="fecha"] [data-un="s"] { color: var(--gold); }

/* A fase que não é a atual fica mais quieta. */
.janela[data-fase="antes"] .janela-painel[data-alvo="fecha"] .janela-tempo b { opacity: .72; }

.janela-trilha {
  position: relative;
  height: 1px;
  margin: clamp(1.2rem, 2.4vw, 1.6rem) var(--j-pad) .9rem;
  background: var(--line);
}

.janela-trilha::before,
.janela-trilha::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--wine);
}

.janela-trilha::before { left: 0; }
.janela-trilha::after { right: 0; }

.janela-trilha-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  height: 3px;
  margin-top: -1px;
  background: var(--wine);
  transition: width 1s linear;
}

.janela-nota { margin: 0 var(--j-pad); color: var(--quiet); font-size: .8rem; }

@media (max-width: 720px) {
  .janela-paineis { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .janela-trilha-fill { transition: none; }
}