/* Marca kworun: ajustes por cima do CSS da página. Carrega POR ÚLTIMO. */

/* Regra do verde: dentro das áreas de fundo escuro o texto verde volta ao verde primário. */
header,
.hero,
.instagram,
footer,
.resident-intro,
.product-frame,
.real-screen,
#product-dialog,
.plan-comparison thead,
.journey-channels button[aria-pressed="true"],
#toast {
  --green-text: var(--kworun-verde);
}
/* Peças que ficam claras também no tema escuro (cartão do síndico no topo, celular de
   exemplo, selo do teste, ícones dos passos, desenho da casa): o texto verde fica escuro. */
.door.accent,
.phone,
.trial-tag,
.step-icon,
.resident-art,
.resident-art-bubble {
  --green-text: var(--kworun-verde-escuro);
}
.resident-art > svg,
.resident-art-bubble svg {
  color: var(--green-text);
}
/* Tema escuro: o painel verde-escuro fica um pouco mais fundo para o texto verde passar de 4,5:1. */
body.dark {
  --pale: #18302a;
}
/* Legenda do canal escolhido (fundo navy ou verde-escuro): verde claro, 5,27:1 no pior caso. */
.journey-channels button[aria-pressed="true"] small {
  color: var(--green-light);
}

/* Logo oficial (arte creme para fundo escuro). Mínimo de 120 px de largura na tela. */
.logo {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: inherit;
  letter-spacing: normal;
}
.logo img {
  display: block;
  width: 140px;
  height: auto;
}
.pronuncia {
  position: static;
  margin-top: 7px;
}
footer .logo img {
  width: 120px;
}
@media (max-width: 700px) {
  .nav .logo img {
    width: 120px;
  }
  .nav .pronuncia {
    margin-top: 5px;
  }
}

/* Botão de contorno herda a cor da faixa onde está (creme no topo e no Instagram). */
.button.outline {
  color: inherit;
}
/* Botão navy na faixa verde de preço. */
.price-inner .button {
  color: var(--kworun-creme);
}

/* Faixa do Instagram: ícone do app da kworun (do mídia kit) no lugar do símbolo genérico.
   Sem rotação: o manual não deixa inclinar a marca. */
.insta-symbol {
  background: transparent;
  transform: none;
  overflow: hidden;
  padding: 0;
  font-size: 0;
}
.insta-symbol img {
  display: block;
  width: 100%;
  height: 100%;
}