/* ============================================================================
   61º FONAITec — tema da edição
   ----------------------------------------------------------------------------
   Carregado DEPOIS de style.css. Não edite style.css: ele é o Bootstrap 4
   concatenado com o template "ftco", tem 249 KB e é regenerável.

   Estratégia: o template já usa as variáveis --fonai-blue / --fonai-blue-2 /
   --fonai-yellow em dezenas de regras. Redefinindo essas três, a maior parte
   do site se recolore sozinha; o restante são componentes novos desta edição.

   Escrito mobile-first: as regras base valem para celular e os @media
   (min-width) ampliam a partir daí.
   ========================================================================== */

:root {
  /* Paleta da edição */
  --azul-noite:  #0B1F3A;
  --azul:        #12345C;
  --azul-claro:  #1E4E86;
  --menta:       #2ED8A7;
  --menta-esc:   #17A97F;
  --menta-clara: #7FE9CC;
  --neutro:      #F4F7FA;
  --neutro-2:    #E3EAF2;
  --texto:       #16202E;
  --texto-suave: #5A6B80;

  /* Sobrescreve o template */
  --fonai-blue:   var(--azul-noite);
  --fonai-blue-2: var(--azul-claro);
  --fonai-yellow: var(--menta);
  --primary:      var(--menta);

  --raio:    14px;
  --raio-sm: 10px;
  --sombra:    0 2px 10px rgba(11, 31, 58, .07);
  --sombra-md: 0 10px 30px rgba(11, 31, 58, .12);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--texto);
  /* Evita que qualquer elemento largo force rolagem lateral no celular —
     o defeito mais comum e mais irritante em telas pequenas. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* Tipografia fluida: uma única regra cobre do celular ao desktop, sem
   depender de breakpoints para cada tamanho. */
h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); line-height: 1.12; font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.4rem); line-height: 1.2;  font-weight: 800; }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem);  line-height: 1.3;  font-weight: 700; }
p  { font-size: clamp(.95rem, 2.4vw, 1.05rem); line-height: 1.7; color: var(--texto-suave); }

/* O template usa 7em de respiro vertical em toda seção — exagerado no celular,
   onde vira rolagem vazia. */
.ftco-section { padding: 3.25rem 0; }
@media (min-width: 768px) { .ftco-section { padding: 5rem 0; } }
@media (min-width: 992px) { .ftco-section { padding: 6.5rem 0; } }

/* Área de toque mínima de 44px e foco sempre visível (navegação por teclado). */
a, button, .btn, .nav-link { min-height: 44px; }
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--menta);
  outline-offset: 2px;
  border-radius: 4px;
}

.secao-titulo { margin-bottom: 2rem; }
.secao-titulo .subheading {
  display: block;
  color: var(--menta-esc);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  margin-bottom: .5rem;
}

/* ── Botões ───────────────────────────────────────────────────────────────── */

.btn-menta, .btn-contorno {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-menta {
  background: var(--menta);
  color: var(--azul-noite) !important;
  box-shadow: 0 6px 18px rgba(46, 216, 167, .3);
}
.btn-menta:hover { background: var(--menta-clara); transform: translateY(-2px); text-decoration: none; }
.btn-contorno { border-color: rgba(255, 255, 255, .55); color: #fff !important; }
.btn-contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }

/* No celular os botões ocupam a linha inteira: alvo maior e menos erro de toque. */
@media (max-width: 575.98px) {
  .btn-menta, .btn-contorno { width: 100%; }
}

/* ── Navegação ────────────────────────────────────────────────────────────── */

/* O template traz três heranças do layout do 60º que quebram esta edição:
     1. a navbar era confinada ao terço direito (left:33.3vw; width:66.7vw),
        porque aquele hero tinha uma imagem à esquerda;
     2. .navbar-brand ficava display:none no desktop;
     3. os links usavam --fonai-blue, que aqui é navy — invisível sobre o
        hero navy desta edição.
   As três são desfeitas abaixo. */
@media (min-width: 992px) {
  .ftco-navbar-light {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .ftco-navbar-light .navbar-brand { display: inline-block !important; }
  .ftco-navbar-light .container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* Sobre o hero escuro o texto precisa ser claro; ao rolar, a navbar ganha
     fundo claro (regra .scrolled do template) e volta ao navy. */
  .ftco-navbar-light:not(.scrolled) .navbar-brand,
  .ftco-navbar-light:not(.scrolled) .navbar-nav > .nav-item > .nav-link {
    color: #fff !important;
  }
  .ftco-navbar-light:not(.scrolled) .navbar-nav > .nav-item.active > a {
    color: var(--menta) !important;
    border-bottom-color: var(--menta);
  }
  .ftco-navbar-light.scrolled .navbar-brand { color: var(--azul-noite) !important; }
}

.ftco-navbar-light .navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.ftco-navbar-light .navbar-brand span { color: var(--menta); }
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: var(--menta) !important;
  border-bottom: 4px solid var(--menta);
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a {
  background: var(--menta);
  border-color: var(--menta);
  color: var(--azul-noite) !important;
  border-radius: 999px;
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover {
  background: var(--menta-clara);
  border-color: var(--menta-clara);
  color: var(--azul-noite) !important;
}
/* Menu aberto no celular: itens espaçados, com divisória sutil. */
@media (max-width: 991.98px) {
  .ftco-navbar-light .navbar-collapse { padding-bottom: .75rem; }
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    padding: .8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .ftco-navbar-light .navbar-nav > .nav-item.cta > a {
    margin-top: .85rem;
    text-align: center;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* O template força min-height:1000px abaixo de 552px, o que deixa o celular
   com uma tela quase vazia antes do primeiro conteúdo útil. */
.hero-wrap,
.hero-61 { min-height: 0 !important; }

.hero-61 {
  position: relative;
  background: var(--azul-noite) url("../images/bg-hero.jpg") center / cover no-repeat;
  color: #fff;
  padding: 4.5rem 0 3rem;
  overflow: hidden;
}
.hero-61::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, .55) 0%, rgba(11, 31, 58, .9) 100%);
}
.hero-61 > .container { position: relative; z-index: 2; }
@media (min-width: 768px) { .hero-61 { padding: 6rem 0 4.5rem; } }

.hero-61 .hero-titulo { margin: 0 0 1.25rem; line-height: 0; }
.hero-61 .logo-61 {
  width: min(230px, 62vw);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .35));
}
.hero-61 .hero-tema {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--menta-clara);
  font-weight: 600;
  max-width: 46ch;
  margin-bottom: 1.75rem;
  line-height: 1.5;
}
.hero-61 .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-weight: 600;
  font-size: .96rem;
}
.hero-61 .hero-meta li { display: flex; align-items: center; gap: .5rem; }
.hero-61 .hero-meta i { color: var(--menta); font-size: 1.15rem; }
.hero-61 .hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Selo de estado (pré / ao vivo / pós) */
.selo-fase {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(46, 216, 167, .16);
  border: 1px solid rgba(46, 216, 167, .45);
  color: var(--menta-clara);
  padding: .4rem .95rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.selo-fase.ao-vivo { animation: pulsar 2s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .selo-fase.ao-vivo { animation: none; }
}

/* ── Contador regressivo ──────────────────────────────────────────────────── */

.contador {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  max-width: 480px;
  margin-top: 1.75rem;
}
.contador > div {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--raio-sm);
  padding: .7rem .25rem;
  text-align: center;
  font-size: clamp(1.3rem, 5.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  /* Números de largura fixa: sem isso o contador "treme" a cada segundo. */
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.contador span {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--menta-clara);
  margin-top: .2rem;
}

/* ── Faixa de destaques ───────────────────────────────────────────────────── */

.faixa-destaques { background: var(--neutro); }
.destaques-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) { .destaques-grade { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.destaque {
  background: #fff;
  border-radius: var(--raio);
  padding: 1.4rem 1.1rem;
  text-align: center;
  box-shadow: var(--sombra);
  height: 100%;
}
.destaque i { font-size: 1.7rem; color: var(--menta-esc); display: block; margin-bottom: .6rem; }
.destaque h3 { font-size: 1rem; margin-bottom: .2rem; color: var(--azul-noite); }
.destaque p  { font-size: .87rem; margin: 0; }

/* ── Cartões genéricos ────────────────────────────────────────────────────── */

.cartao {
  background: #fff;
  border: 1px solid var(--neutro-2);
  border-radius: var(--raio);
  padding: 1.5rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }

.grade-eixos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 576px) { .grade-eixos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .grade-eixos { grid-template-columns: repeat(4, 1fr); } }

.eixo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--azul-noite);
  color: var(--menta);
  font-weight: 800;
  margin-bottom: .9rem;
}

/* ── Palestrantes ─────────────────────────────────────────────────────────── */

/* minmax(150px) e não 220px: com 220px o celular cai para uma única coluna e
   cada retrato vira um quadrado de largura total, esticando a página. */
.grade-palestrantes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .grade-palestrantes { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}
.palestrante { text-align: center; }
.palestrante img,
.palestrante .avatar-vazio {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--neutro-2);
  margin-bottom: .9rem;
}
.palestrante .avatar-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-suave);
  font-size: 2.5rem;
}
.palestrante h3 { font-size: 1.02rem; margin-bottom: .15rem; color: var(--azul-noite); }
.palestrante p  { font-size: .87rem; margin: 0; }

/* ── Programação ──────────────────────────────────────────────────────────── */

/* Seletor de dias: no celular vira uma faixa rolável na horizontal, em vez de
   quebrar em várias linhas ou espremer os rótulos. */
.dias-nav {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  margin-bottom: 1.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dias-nav::-webkit-scrollbar { height: 4px; }
.dias-nav::-webkit-scrollbar-thumb { background: var(--neutro-2); border-radius: 4px; }

.dia-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--neutro-2);
  background: #fff;
  border-radius: 999px;
  padding: .65rem 1.15rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--azul-noite);
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.dia-pill small { font-weight: 500; font-size: .72rem; color: var(--texto-suave); }
.dia-pill.ativo { background: var(--azul-noite); color: #fff; border-color: var(--azul-noite); }
.dia-pill.ativo small { color: var(--menta-clara); }

.painel-dia[hidden] { display: none; }

.item-prog {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem .5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--neutro-2);
}
@media (min-width: 640px) {
  .item-prog { grid-template-columns: 110px 1fr; gap: .25rem 1.25rem; padding: 1.15rem 0; }
}
.item-prog .hora {
  font-weight: 800;
  color: var(--menta-esc);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.item-prog h3 { font-size: 1.02rem; margin: 0 0 .2rem; color: var(--azul-noite); }
.item-prog p  { margin: 0; font-size: .9rem; }

/* Estado vazio — usado enquanto tema, palestrantes e grade não estão fechados. */
.vazio {
  text-align: center;
  padding: 2.5rem 1.25rem;
  background: var(--neutro);
  border: 1px dashed var(--neutro-2);
  border-radius: var(--raio);
  color: var(--texto-suave);
}
.vazio i { font-size: 2rem; color: var(--menta-esc); display: block; margin-bottom: .6rem; }
.vazio p { margin: 0; }

/* ── Inscrição ────────────────────────────────────────────────────────────── */

.grade-precos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) { .grade-precos { grid-template-columns: repeat(3, 1fr); } }

.preco {
  background: #fff;
  border: 1px solid var(--neutro-2);
  border-radius: var(--raio);
  padding: 1.75rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.preco.destaque-preco {
  border-color: var(--menta);
  box-shadow: 0 10px 34px rgba(46, 216, 167, .2);
  position: relative;
}
/* O rótulo vem do atributo data-selo, para ser editável no HTML. */
.preco.destaque-preco::before {
  content: attr(data-selo);
  position: absolute;
  top: -.75rem; left: 50%;
  transform: translateX(-50%);
  background: var(--menta);
  color: var(--azul-noite);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .85rem;
  border-radius: 999px;
  white-space: nowrap;
}
.preco h3 { color: var(--azul-noite); margin-bottom: .6rem; }
.preco .valor {
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  font-weight: 800;
  color: var(--azul-noite);
  line-height: 1.1;
}
.preco .valor small { display: block; font-size: .8rem; font-weight: 600; color: var(--texto-suave); }
.preco ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  text-align: left;
  flex-grow: 1;
}
.preco ul li {
  display: flex;
  gap: .55rem;
  font-size: .9rem;
  color: var(--texto-suave);
  padding: .4rem 0;
}
.preco ul li i { color: var(--menta-esc); flex-shrink: 0; margin-top: .15rem; }

/* ── Edições anteriores ───────────────────────────────────────────────────── */

.grade-edicoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media (min-width: 768px) { .grade-edicoes { grid-template-columns: repeat(4, 1fr); } }

.edicao {
  display: block;
  background: var(--azul-noite);
  color: #fff !important;
  border-radius: var(--raio);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}
.edicao:hover { background: var(--azul); transform: translateY(-3px); text-decoration: none; }
.edicao strong { display: block; font-size: 1.05rem; }
.edicao span { font-size: .8rem; color: var(--menta-clara); }

/* ── Rodapé ───────────────────────────────────────────────────────────────── */

.ftco-footer { background: var(--azul-noite) !important; }
.ftco-footer .ftco-heading-2 { color: #fff; font-size: 1.05rem; }
.footer-lista li { color: rgba(255, 255, 255, .72); padding: .35rem 0; font-size: .92rem; }
.footer-lista i { color: var(--menta); margin-right: .5rem; }

/* ── Utilitários ──────────────────────────────────────────────────────────── */

.aviso-provisorio {
  background: rgba(240, 186, 42, .12);
  border-left: 3px solid #F0BA2A;
  border-radius: var(--raio-sm);
  padding: .85rem 1rem;
  font-size: .85rem;
  color: #7a5b00;
  margin-top: 1.25rem;
}
.aviso-provisorio strong { color: #5e4600; }
/* Nomes de tabela/coluna não têm espaços e estouravam a caixa no celular. */
.aviso-provisorio code {
  font-size: .82em;
  overflow-wrap: anywhere;
  background: rgba(0, 0, 0, .05);
  padding: .1em .35em;
  border-radius: 4px;
  color: #5e4600;
}

/* Visível apenas para leitores de tela. */
.sr-apenas {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Hero: logotipo centralizado no celular ───────────────────────────────────
   Abaixo de lg o hero é uma coluna só, e o logotipo funciona melhor como
   cabeçalho centralizado. O selo acompanha, senão a marca fica centrada com um
   selo encostado à esquerda. O texto corrido segue alinhado à esquerda: linha
   longa centralizada é pior de ler. */

@media (max-width: 991.98px) {
  .hero-61 .hero-titulo { text-align: center; }
  .hero-61 .logo-61 { margin-left: auto; margin-right: auto; }
  .hero-61 .selo-fase { display: flex; width: -moz-fit-content; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* ── Hero: mosaico de participantes ───────────────────────────────────────────
   A identidade desta edição já é uma malha de nós conectados (ver bg-hero.jpg):
   aqui os nós deixam de ser abstratos e passam a ser quem participou on-line.
   Só aparece a partir de lg — no celular ocuparia a tela toda antes do conteúdo
   útil, e as imagens nem são baixadas (quem monta é o JS). */

.hero-mosaico { display: none; }

@media (min-width: 992px) {
  .hero-mosaico {
    display: block;
    align-self: center;
  }
}

.mosaico {
  position: relative;
  width: 100%;
  /* Quadrado: deixa as coordenadas em % valerem igual nos dois eixos, então o
     mesmo número serve para posicionar peça e para o viewBox do SVG. */
  aspect-ratio: 1 / 1;
}

/* Linhas de ligação, atrás das peças. Redesenhadas pelo JS a cada quadro, para
   continuarem presas aos nós enquanto eles flutuam. */
.mosaico-linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mosaico-linhas line {
  stroke: var(--menta);
  stroke-width: .35;
  stroke-opacity: .34;
  stroke-linecap: round;
}

.mosaico-no {
  position: absolute;
  /* left/top são o centro do nó; o translate central tira a metade do próprio
     tamanho. O JS acrescenta a deriva depois deste translate. */
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* Peça com foto: proporção 4:3, que é o recorte pedido para as imagens reais. */
.mosaico-peca {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(11, 31, 58, .6);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .38),
    0 0 0 1px rgba(46, 216, 167, .30),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.mosaico-peca img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.mosaico-peca img.visivel { opacity: 1; }

/* Nó sem foto: ponto de menta, o mesmo vocabulário da malha do fundo. */
.mosaico-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--menta);
  box-shadow: 0 0 0 5px rgba(46, 216, 167, .14);
}

@media (prefers-reduced-motion: reduce) {
  /* Sem flutuação nem troca de posição; a transição das fotos continua, porque
     variação de opacidade não é o que incomoda quem pediu menos movimento. */
  .mosaico-no { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS (inscrição)
   ═══════════════════════════════════════════════════════════════════════════
   O template ftco assume que toda página começa com um hero de tela cheia sob
   a navbar transparente. Nas internas não há hero, então a navbar precisa de
   fundo próprio e o conteúdo, de respiro no topo.
   ─────────────────────────────────────────────────────────────────────────── */

.pagina-interna { background: var(--neutro); }

.pagina-interna #ftco-navbar {
  position: relative;
  background: var(--azul-noite) !important;
}

.pagina-interna main { padding-top: 2.5rem; }

/* ── Resumo da inscrição ─────────────────────────────────────────────────── */

/* `.cartao` traz height:100% para igualar a altura dos cartões dentro das
   grades da landing. Aqui o cartão é filho direto da coluna do Bootstrap — que
   é um flex item de altura definida —, então esse 100% o esticava até a altura
   da coluna inteira, empurrando o acordeão de pagamento para baixo do rodapé. */
.resumo-inscricao { height: auto; }

.resumo-lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem 1rem;
  margin: 0;
}

@media (min-width: 576px) {
  /* Rótulo à esquerda, valor à direita. Abaixo disso empilha, senão a coluna
     de valores fica com 4 caracteres de largura no celular. */
  .resumo-lista { grid-template-columns: auto 1fr; }
}

.resumo-lista dt {
  font-weight: 600;
  color: var(--texto-suave);
  font-size: .88rem;
}

.resumo-lista dd {
  margin: 0 0 .6rem;
  color: var(--texto);
}

.resumo-lista dd small { color: var(--texto-suave); }

/* ── Formas de pagamento ─────────────────────────────────────────────────── */

.accordion-pagamento .card {
  border: 1px solid var(--neutro-2);
  border-radius: var(--raio-sm);
  margin-bottom: .75rem;
  overflow: hidden;
}

.accordion-pagamento .card-header {
  background: #fff;
  border-bottom: 0;
  padding: 0;
}

.accordion-pagamento .card-header a {
  display: block;
  padding: 1rem 1.15rem;
  font-weight: 600;
}

.accordion-pagamento .card-header a:hover { text-decoration: none; background: var(--neutro); }
.accordion-pagamento .card-header i { color: var(--menta-esc); margin-right: .4rem; }

/* ── Dados bancários ─────────────────────────────────────────────────────── */

.dados-bancarios {
  background: var(--neutro);
  border-radius: var(--raio-sm);
  padding: 1rem 1.15rem;
}

.dados-bancarios-titulo {
  font-weight: 700;
  font-size: .95rem;
  color: var(--azul-noite);
  margin-bottom: .6rem;
}

.dados-bancarios dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .9rem;
  margin: 0;
  font-size: .9rem;
}

.dados-bancarios dt { font-weight: 700; color: var(--azul-noite); }
.dados-bancarios dd { margin: 0; }

/* ── Faixa de valor no formulário ────────────────────────────────────────── */

.faixa-valor {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .5rem .9rem;
  border-radius: var(--raio-sm);
  background: var(--azul-noite);
  color: #fff;
}

.faixa-valor.associado { background: var(--menta-esc); }