/* ============================================================
   MURAL DE PRINTS · depoimentos reais (Instagram + Google)
   Arquivo independente: usa os tokens do site com fallback,
   então não depende de alterações no style.min.css
   ============================================================ */

.proof-wall {
  /* branco, e nao --paper: a secao seguinte (#comparacao) e transparente e
     herda o --paper do body. Com as duas iguais, as seções colavam e o mural
     parecia estar dentro de "Sua vida antes e depois do diploma". */
  background: var(--white, #fff);
  position: relative;
  overflow: hidden;
}
.proof-wall::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 50% -10%, rgba(201, 162, 39, .07), transparent 70%);
}
/* fecha a faixa branca: sem isso a secao encostava na #comparacao,
   que e transparente e herda o mesmo tom claro do body */
.proof-wall::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-100, #E8EDF5) 18%, var(--ink-100, #E8EDF5) 82%, transparent);
}
.proof-wall .container { position: relative; }

/* o .eyebrow global usa --gold (2.28:1 sobre fundo claro).
   aqui a seção é clara, então escurece o tom só dentro dela: 4.62:1 */
.proof-wall .eyebrow { color: var(--gold-deep, #8A6D14); }
.proof-wall .eyebrow::before { background: var(--gold-deep, #8A6D14); display: none; }
.proof-wall .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- cabeçalho ---------- */
.pw-head { text-align: center; }
.pw-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px);
}
.pw-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper, #F7F8FA);
  border: 1px solid var(--ink-100, #E8EDF5);
  border-radius: 999px; padding: 7px 14px;
  font-size: .8rem; font-weight: 600; color: var(--text-soft, #5B6B7E);
  box-shadow: 0 1px 2px rgba(12, 27, 51, .04);
}
.pw-chip svg { flex-shrink: 0; }
.pw-chip strong { color: var(--ink-900, #0C1B33); font-weight: 800; }

/* ---------- filtro segmentado ---------- */
.pw-filter {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--paper, #F7F8FA);
  border: 1px solid var(--ink-100, #E8EDF5);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(12, 27, 51, .05), 0 4px 14px rgba(12, 27, 51, .05);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.pw-tab {
  border: 0; cursor: pointer; background: transparent;
  font-family: inherit; font-size: .86rem; font-weight: 600;
  color: var(--text-soft, #5B6B7E);
  padding: 12px 20px; border-radius: 999px; min-height: 44px;
  transition: background .3s var(--ease, ease), color .3s;
}
.pw-tab:hover { color: var(--ink-900, #0C1B33); }
.pw-tab.active {
  background: var(--ink-900, #0C1B33); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pw-tab .pw-tab-n { opacity: .55; font-weight: 600; margin-left: 5px; }

/* ---------- mural (masonry por colunas: não corta nenhum print) ---------- */
.pw-wall-wrap { position: relative; }
.pw-wall {
  columns: 4;
  column-gap: 18px;
  transition: max-height .6s var(--ease, ease);
}
.pw-wall-wrap.collapsed .pw-wall {
  max-height: 1180px;
  overflow: hidden;
}

.pw-card {
  position: relative; display: block; width: 100%;
  break-inside: avoid; margin: 0 0 18px;
  padding: 0; border: 1px solid rgba(12, 27, 51, .10);
  border-radius: 14px; overflow: hidden;
  background: var(--white, #fff); cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(12, 27, 51, .06), 0 6px 18px rgba(12, 27, 51, .07);
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), border-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.pw-card img {
  display: block; width: 100%; height: auto;
  border-radius: 13px;
}
.pw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, .45);
  box-shadow: 0 2px 4px rgba(12, 27, 51, .06), 0 14px 34px rgba(12, 27, 51, .12);
  z-index: 2;
}
.pw-card:focus-visible {
  outline: 3px solid var(--gold, #C9A227); outline-offset: 3px;
}

/* selo da origem */
.pw-src {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 27, 51, .55); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .3s, transform .3s var(--ease, ease);
}
.pw-card:hover .pw-src,
.pw-card:focus-visible .pw-src { opacity: 1; transform: none; }

/* lupa no hover */
.pw-zoom {
  position: absolute; bottom: 9px; right: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(12, 27, 51, .58); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s var(--ease, ease);
  pointer-events: none;
}
.pw-card:hover .pw-zoom { opacity: 1; transform: none; }

/* ---------- fade + botão ver mais ---------- */
.pw-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 260px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white, #fff) 72%);
  pointer-events: none; opacity: 0; transition: opacity .5s;
}
.pw-wall-wrap.collapsed .pw-fade { opacity: 1; }

.pw-more { text-align: center; margin-top: 8px; }
/* respiro para a barra fixa do site nao cobrir o botao no celular */
@media (max-width: 760px) { .pw-more { padding-bottom: 12px; } }
.pw-more-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: .95rem; font-weight: 800;
  color: var(--ink-900, #0C1B33); cursor: pointer;
  background: var(--paper, #F7F8FA);
  border: 1px solid var(--ink-100, #E8EDF5);
  border-radius: 999px; padding: 16px 30px; min-height: 48px;
  box-shadow: 0 1px 2px rgba(12, 27, 51, .05), 0 6px 18px rgba(12, 27, 51, .07);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), border-color .25s;
}
.pw-more-btn:hover {
  transform: translateY(-2px); border-color: rgba(201, 162, 39, .5);
  box-shadow: 0 2px 4px rgba(12, 27, 51, .06), 0 12px 28px rgba(12, 27, 51, .1);
}
.pw-more-btn svg { transition: transform .3s var(--ease, ease); }
.pw-wall-wrap.expanded ~ .pw-more .pw-more-btn svg { transform: rotate(180deg); }

/* ---------- lightbox ---------- */
.pw-lb {
  position: fixed; inset: 0; z-index: 1900; /* abaixo do .lead-modal (2000) de propósito */
  display: none; place-items: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(6, 12, 24, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .3s var(--ease, ease);
}
.pw-lb.open { display: grid; }
.pw-lb.visible { opacity: 1; }
.pw-lb-stage {
  position: relative; max-width: min(560px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(.97); transition: transform .35s var(--ease, ease);
}
.pw-lb.visible .pw-lb-stage { transform: none; }
.pw-lb-img {
  display: block; max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  border-radius: 16px; border: 1px solid rgba(201, 162, 39, .35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  background: #0C1B33;
}
.pw-lb-bar {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255, 255, 255, .85); font-size: .84rem; font-weight: 600;
}
.pw-lb-count { min-width: 66px; text-align: center; letter-spacing: .06em; }
.pw-lb-src {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .6); font-size: .78rem;
}

.pw-lb-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .25s, border-color .25s, color .25s, transform .2s var(--ease, ease), opacity .25s;
}
.pw-lb-btn:hover {
  background: var(--gold, #C9A227); border-color: var(--gold, #C9A227);
  color: var(--ink-900, #0C1B33);
}
.pw-lb-btn:active { transform: scale(.94); }
.pw-lb-btn:disabled { opacity: .28; pointer-events: none; }
.pw-lb-close {
  position: absolute; top: -6px; right: -6px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(12, 27, 51, .75); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .25s, transform .2s var(--ease, ease);
}
.pw-lb-close:hover { background: var(--gold, #C9A227); color: var(--ink-900, #0C1B33); }
body.pw-lock { overflow: hidden; }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .pw-wall { columns: 3; }
  .pw-wall-wrap.collapsed .pw-wall { max-height: 1080px; }
}
@media (max-width: 760px) {
  .pw-wall { columns: 2; column-gap: 12px; }
  .pw-card { margin-bottom: 12px; border-radius: 12px; }
  .pw-card img { border-radius: 11px; }
  .pw-wall-wrap.collapsed .pw-wall { max-height: 760px; }
  .pw-fade { height: 200px; }
  .pw-tab { padding: 9px 14px; font-size: .8rem; }
  .pw-src, .pw-zoom { opacity: 1; transform: none; }
  .pw-zoom { display: none; }
  .pw-lb-close { top: 2px; right: 2px; }
  .pw-lb-img { max-height: calc(100vh - 132px); }
}
/* telas estreitas (360px): o segmentado nao cabia com os contadores */
@media (max-width: 420px) {
  .pw-filter { width: 100%; justify-content: center; padding: 3px; }
  .pw-tab { flex: 1; padding: 12px 8px; font-size: .8rem; justify-content: center; }
  .pw-tab-n { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-card, .pw-more-btn, .pw-lb, .pw-lb-stage, .pw-wall { transition: none; }
}

/* ============================================================
   MOBILE PREMIUM · o mural vira carrossel de cards grandes
   Motivo: em 2 colunas o card fica com ~155px e o texto do print
   fica ilegivel. No carrossel o card passa de 155px para ~300px.
   ============================================================ */
.pw-carousel-nav { display: none; }

@media (max-width: 760px) {
  /* de masonry para trilho horizontal */
  .pw-wall {
    columns: auto;
    display: flex; gap: 14px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    /* sangria: o card encosta na borda da tela, como as galerias da Apple */
    margin-inline: calc(clamp(20px, 4vw, 32px) * -1);
    padding-inline: clamp(20px, 4vw, 32px);
  }
  .pw-wall::-webkit-scrollbar { display: none; }
  .pw-wall-wrap.collapsed .pw-wall { max-height: none; overflow-x: auto; }

  /* Galeria justificada: todos os cards com a MESMA ALTURA e a largura
     acompanhando a proporcao de cada print. Resultado: zero corte, zero
     distorcao e nenhuma moldura branca sobrando nos prints altos. */
  .pw-card {
    flex: 0 0 auto;
    height: 58vh; min-height: 400px; max-height: 540px;
    width: auto; max-width: 86vw;
    margin: 0; scroll-snap-align: center;
    border-radius: 18px;
  }
  .pw-card img {
    height: 100%; width: auto; max-width: 100%;
    object-fit: contain; border-radius: 17px;
  }
  /* print muito longo (conversa comprida): o card assume proporcao de retrato
     e a imagem preenche cortando SO o rodape. Ganha ~25% de largura util,
     sem perder nada na lateral. O print inteiro segue na ampliacao. */
  .pw-card[data-forma="longo"] {
    aspect-ratio: .62; width: auto;
  }
  .pw-card[data-forma="longo"] img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
  }
  /* prints largos/quadrados batem no limite de largura: centraliza sem cortar */
  /* quadrado: card com a altura exata da imagem, centralizado na fileira.
     Evita ~31% de moldura branca que sobraria num card de altura cheia. */
  .pw-card[data-forma="largo"] {
    width: 86vw; height: auto; min-height: 0; align-self: center;
  }
  .pw-card[data-forma="largo"] img { width: 100%; height: auto; padding: 0; }
  .pw-card[data-forma="largo"]::before { display: none; }
  .pw-card[data-forma="largo"]::after { content: 'TOQUE PARA AMPLIAR'; background: rgba(12, 27, 51, .5); }

  /* print em formato tira: card baixo, centralizado na fileira.
     Sem isso sobrariam ~80% de moldura branca dentro de um card alto. */
  .pw-card[data-forma="tira"] {
    height: auto; min-height: 0; align-self: center; width: 86vw;
  }
  .pw-card[data-forma="tira"] img { height: auto; width: 100%; padding: 0; }
  .pw-card[data-forma="tira"]::before { display: none; }
  .pw-card[data-forma="tira"]::after { content: 'TOQUE PARA AMPLIAR'; background: rgba(12, 27, 51, .5); }
  /* o print continua inteiro na ampliacao, o card e so a vitrine */
  .pw-card::after {
    content: 'TOQUE PARA LER TUDO';
    position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
    padding: 9px 12px; border-radius: 999px; text-align: center;
    font-size: .64rem; font-weight: 800; letter-spacing: .1em;
    color: #fff; background: rgba(12, 27, 51, .62);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  }
  /* degrade para o texto do print nao brigar com a etiqueta */
  .pw-card::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    z-index: 1; pointer-events: none; border-radius: 0 0 17px 17px;
    background: linear-gradient(180deg, transparent, rgba(12, 27, 51, .30));
  }
  .pw-src { opacity: 1; transform: none; top: 12px; right: 12px; width: 30px; height: 30px; }
  .pw-zoom { display: none; }

  /* no carrossel nao existe "ver mais" nem degrade de corte */
  .pw-fade { display: none; }
  .pw-more { display: none !important; }

  /* setas + trilho de progresso */
  .pw-carousel-nav {
    display: flex; align-items: center; gap: 14px;
    justify-content: center; margin-top: 18px;
  }
  .pw-arrow {
    width: 46px; height: 46px; min-width: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--paper, #F7F8FA); color: var(--ink-900, #0C1B33);
    border: 1px solid var(--ink-100, #E8EDF5);
    box-shadow: 0 1px 2px rgba(12, 27, 51, .06), 0 6px 16px rgba(12, 27, 51, .08);
    transition: transform .2s var(--ease, ease), opacity .25s, border-color .25s;
  }
  .pw-arrow:active { transform: scale(.93); }
  .pw-arrow:disabled { opacity: .3; }
  .pw-track {
    flex: 1; max-width: 160px; height: 3px; border-radius: 999px;
    background: var(--ink-100, #E8EDF5); overflow: hidden;
  }
  .pw-track-fill {
    height: 100%; width: 12%; border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-deep, #8A6D14), var(--gold, #C9A227));
    transition: width .2s ease-out;
  }
}

@media (max-width: 380px) {
  .pw-card { height: 54vh; min-height: 360px; max-width: 88vw; }
  .pw-card[data-forma="largo"], .pw-card[data-forma="tira"] { width: 88vw; }
}