/* -------- Faixa -------- */

.faixa {
  --faixa-h: 64px;
  color: var(--sobre-azul);
  background: var(--azul);
}

.faixa-barra {
  display: flex;
  align-items: stretch;
  min-height: var(--faixa-h);
}

.faixa-janela {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.faixa-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-2) var(--esp-6);
  padding: var(--esp-3) var(--esp-5);
}

.faixa-item {
  position: relative;
  padding-left: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.faixa-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--amarelo);
  border-radius: 50%;
  transform: translateY(-50%);
}

.faixa-item--destaque { color: var(--amarelo); }

.faixa-toggle {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.faixa-toggle[hidden] { display: none; }

.faixa-toggle:focus-visible { outline-offset: -4px; }

.faixa--anima .faixa-trilho {
  display: flex;
  width: max-content;
}

.faixa--anima .faixa-lista {
  flex-wrap: nowrap;
  flex: none;
  gap: 0;
  min-height: var(--faixa-h);
  padding-block: 0;
  padding-inline: 0;
  align-items: center;
}

.faixa--anima .faixa-item {
  padding-right: var(--esp-6);
  padding-left: calc(var(--esp-6) + 18px);
}

.faixa--anima .faixa-item::before { left: var(--esp-6); }

@keyframes faixa-corre {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: no-preference) {
  .faixa--anima .faixa-trilho {
    animation: faixa-corre var(--faixa-duracao, 40s) linear infinite;
  }

  .faixa--pausada .faixa-trilho,
  .faixa:focus-within:has(:focus-visible) .faixa-trilho,
  .faixa--anima .faixa-janela:hover .faixa-trilho { animation-play-state: paused; }
}

/* -------- Planos -------- */

.sprite-icones {
  position: absolute;
  width: 0;
  height: 0;
}

.planos-grid {
  display: grid;
  gap: var(--esp-5);
  margin-top: var(--esp-8);
}

.planos-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: clamp(22px, 2.6vw, 32px);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
}

.planos-card--anual {
  border: 3px solid var(--azul);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

.planos-rotulo {
  position: absolute;
  inset: auto -3px 100% -3px;
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: center;
  color: var(--sobre-azul);
  background: var(--azul);
  border-radius: var(--raio-lg) var(--raio-lg) 0 0;
}

.planos-img {
  position: relative;
  aspect-ratio: 1;
  margin-block: -16px -8px;
}

.planos-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

.planos-topo {
  display: grid;
  gap: 2px;
  text-align: center;
}

.planos-duracao {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.planos-preco-bloco {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--esp-1);
  align-items: center;
  padding-bottom: var(--esp-4);
  text-align: center;
  border-bottom: 1px solid var(--cinza-borda);
}

.planos-pre {
  font-weight: 700;
  color: var(--texto-suave);
}

.planos-preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--esp-2);
}

.planos-marca {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 14px;
  color: var(--azul);
  border-radius: var(--raio-sm);
}

.planos-card--anual .planos-marca { background: var(--amarelo); }

.planos-rs {
  font-size: 1.125rem;
  font-weight: 800;
}

.planos-valor {
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.875rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.planos-un {
  font-weight: 700;
  color: var(--texto-suave);
}

.planos-difs {
  display: grid;
  gap: var(--esp-3);
  font-size: var(--fs-sm);
}

.planos-dif {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
}

.planos-dif > span { display: grid; }

.planos-dif--gratis { font-weight: 700; color: var(--azul); }

.planos-dif__sub {
  font-weight: 400;
  color: var(--texto-suave);
}

.planos-ic {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--azul);
}

.planos-fim {
  display: grid;
  gap: var(--esp-3);
  align-content: start;
  min-height: 5.5rem;
  margin-top: auto;
}

.planos-btn { min-height: 56px; }

.planos-nota {
  font-size: var(--fs-xs);
  font-style: italic;
  text-align: center;
  color: var(--texto-suave);
}

.planos-nota-geral,
.planos-ajuda {
  margin-top: var(--esp-4);
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--texto-suave);
}

.planos-nota-geral { margin-top: var(--esp-6); }

.planos-ajuda { margin-top: var(--esp-2); }

/* -------- Hall -------- */

.hall-mural {
  max-width: 980px;
  margin-inline: auto;
  columns: 1;
  column-gap: var(--esp-5);
}

.hall-card {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
  padding: var(--esp-5);
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-lg);
  break-inside: avoid;
}

.hall-rotulo {
  justify-self: start;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--texto-suave);
  background: var(--cinza-secao);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-sm);
}

.hall-texto { color: var(--texto); }

.hall-autor {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cinza-borda);
}

.hall-avatar {
  flex: none;
  color: var(--azul);
}

.hall-quem {
  display: grid;
  line-height: 1.3;
}

.hall-nome { font-weight: 700; }

.hall-cidade {
  font-size: var(--fs-sm);
  color: var(--texto-suave);
}

.hall-quadro {
  display: grid;
  gap: var(--esp-3);
  justify-items: center;
  align-content: center;
  min-height: 260px;
  padding: var(--esp-5);
  text-align: center;
  color: var(--azul);
  background: var(--cinza-secao);
  border-radius: var(--raio);
}

.hall-quadro__txt {
  font-weight: 700;
  color: var(--texto);
}

.hall-sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.hall-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--esp-6);
}

.hall-cta .btn { max-width: 100%; }

/* -------- FAQ -------- */

.faq-in { max-width: calc(860px + var(--gutter) * 2); }

.faq-lista {
  display: grid;
  gap: var(--esp-3);
}

.faq-item {
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
}

.faq-item[open] { border-color: var(--azul); }

.faq-q {
  position: relative;
  display: block;
  min-height: var(--alvo-min);
  padding: var(--esp-4) 56px var(--esp-4) var(--esp-5);
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--esp-5);
  width: 9px;
  height: 9px;
  border: solid var(--azul);
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-70%) rotate(45deg);
}

.faq-item[open] .faq-q::after { transform: translateY(-30%) rotate(-135deg); }

.faq-a {
  display: grid;
  gap: var(--esp-3);
  padding: 0 var(--esp-5) var(--esp-5);
  color: var(--texto-suave);
}

.faq-lista-interna {
  display: grid;
  gap: var(--esp-2);
}

.faq-ajuda {
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
  margin-top: var(--esp-7);
  text-align: center;
}

/* -------- CTA final -------- */

.cta {
  padding-bottom: var(--esp-6);
  background: var(--azul-claro);
}

.cta-in {
  display: grid;
  gap: var(--esp-4);
  justify-items: center;
  max-width: calc(820px + var(--gutter) * 2);
  text-align: center;
}

.cta-titulo { max-width: 22ch; }

.cta-texto { margin-bottom: var(--esp-3); }

@media (min-width: 700px) {
  .hall-mural { columns: 2; }
}

@media (min-width: 960px) {
  .planos-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: var(--esp-5);
  }
}

@media (max-width: 959px) {
  .planos-card--anual { margin-top: var(--esp-6); }
}

@media (max-width: 539px) {
  .hall-cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .faixa--anima .faixa-trilho { animation: none; }
}