/* =========================================================================
   EQUIPE — carrossel em profundidade, no mesmo espírito da galeria do globo.
   São mais de quarenta pessoas: em vez de uma parede de rostos, uma de cada
   vez no centro, com o convite para conversar logo abaixo.
   ========================================================================= */

.eq { margin-top: 1.6rem; }

.eq-topo {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .8rem 1.2rem; margin-bottom: 1.4rem;
}

.eq-abas { display: inline-flex; gap: .3rem; padding: .3rem;
  border: 1px solid var(--fina); border-radius: 999px; }
.eq-aba {
  padding: .55rem 1.3rem; border: 0; border-radius: 999px;
  background: none; color: var(--suave); font-size: .93rem; cursor: pointer;
  transition: background .25s, color .25s;
}
.eq-aba.agora { background: var(--ouro); color: #14110E; font-weight: 600; }

/* --------------------------------- busca --------------------------------- */

.eq-busca { position: relative; flex: 1 1 240px; max-width: 330px; }
.eq-busca input {
  width: 100%; padding: .72rem 1.05rem;
  border-radius: 999px; border: 1px solid var(--fina);
  background: rgba(241,232,217,.04); color: var(--texto);
  font-family: var(--sans); font-size: .92rem;
}
.eq-busca input::placeholder { color: #7d766a; }
.eq-busca input:focus { outline: none; border-color: var(--ouro); }

.eq-sugestoes {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 12;
  border: 1px solid var(--fina); border-radius: 12px; overflow: hidden;
  background: #1A1510; box-shadow: 0 20px 40px rgba(0,0,0,.55);
}
.eq-sugestoes button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .6rem .8rem; border: 0; background: none; cursor: pointer;
  color: var(--texto); font-size: .88rem; text-align: left;
}
.eq-sugestoes button:hover { background: rgba(201,162,39,.14); }
.eq-sugestoes small { color: var(--suave); font-size: .76rem; }

/* ------------------------------- carrossel ------------------------------- */

.eq-palco {
  position: relative;
  height: clamp(270px, 34vw, 360px);
  perspective: 1500px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.eq-palco.arrastando { cursor: grabbing; }

.eq-cartao {
  position: absolute; top: 50%; left: 50%;
  width: clamp(168px, 20vw, 226px);
  height: clamp(224px, 27vw, 300px);
  margin: 0; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden;
  background: var(--tom, #8C6A2F);
  box-shadow: 0 24px 46px rgba(0,0,0,.6);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .55s cubic-bezier(.2,.75,.25,1), opacity .55s, box-shadow .55s;
  cursor: pointer; color: inherit;
}
.eq-cartao img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-cartao .eq-mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 3.4rem; color: rgba(255,255,255,.85);
}
.eq-cartao .eq-veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,14,0) 42%, rgba(12,9,7,.9));
}
.eq-cartao .eq-txt {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .85rem 1rem;
  text-align: center;
}
.eq-cartao .eq-n { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.15; }
.eq-cartao .eq-c { display: block; font-size: .74rem; color: #CDC4B5; margin-top: .15rem; }
.eq-cartao.meio { box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(201,162,39,.5); }
.eq-cartao:not(.meio) .eq-txt { opacity: 0; }

/* ------------------------------- controles ------------------------------- */

.eq-controles {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  margin-top: 1.2rem;
}
.eq-seta {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--fina); background: none; color: var(--texto);
  font-size: 1.05rem; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.eq-seta:hover { background: var(--ouro); border-color: var(--ouro); color: #14110E; }

.eq-atual { min-width: 190px; text-align: center; }
.eq-atual-nome { display: block; font-family: var(--serif); font-size: 1.22rem; line-height: 1.15; }
.eq-atual-cargo { display: block; font-size: .82rem; color: var(--ouro); letter-spacing: .03em; }

.eq-chamada {
  text-align: center; margin: 1.4rem 0 .8rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem); color: #CDC4B5;
  min-height: 1.6em;
  transition: opacity .3s;
}
.eq-chamada.trocando { opacity: 0; }

.eq-falar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: fit-content; margin: 0 auto; padding: .95rem 1.9rem;
  border-radius: 999px; text-decoration: none;
  background: #25A75A; color: #fff; font-weight: 600; font-size: 1rem;
  box-shadow: 0 14px 28px rgba(0,0,0,.4);
  transition: background .2s, transform .2s;
}
.eq-falar:hover { background: #2FC46B; transform: translateY(-2px); }
.eq-falar svg { width: 21px; height: 21px; fill: currentColor; }

/* ------------------------------ ver todos ------------------------------ */

.eq-modo {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .66rem 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--fina); background: none; color: var(--texto);
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.eq-modo svg { width: 16px; height: 16px; fill: none; stroke: var(--ouro); stroke-width: 1.6; }
.eq-modo:hover { border-color: var(--ouro); }
.eq-modo[aria-pressed="true"] { background: var(--ouro); color: #14110E; border-color: var(--ouro); }
.eq-modo[aria-pressed="true"] svg { stroke: #14110E; }

.eq-abas.escondida { display: none; }
.eq-grade[hidden], .eq-carrossel[hidden] { display: none; }

.eq-grade { animation: eq-surge .35s ease; }
@keyframes eq-surge { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eq-grade-bloco + .eq-grade-bloco { margin-top: 2.2rem; }
.eq-grade-unidade {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--serif); font-weight: 500; font-size: 1.35rem;
  margin: 0 0 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--fina);
}
.eq-grade-unidade small {
  font-family: var(--sans); font-size: .78rem; color: var(--suave);
  letter-spacing: .04em; text-transform: uppercase;
}

.eq-grade-lista {
  display: grid; gap: 1.3rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}
.eq-grade-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .25rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.eq-grade-foto {
  position: relative; width: 104px; height: 104px; margin-bottom: .45rem;
  border-radius: 50%; overflow: hidden; background: var(--tom, #8C6A2F);
  box-shadow: 0 0 0 2px rgba(241,232,217,.14), 0 10px 22px rgba(0,0,0,.4);
  transition: box-shadow .25s, transform .25s;
}
.eq-grade-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-grade-foto .eq-mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 2rem; color: rgba(255,255,255,.85);
}
.eq-grade-item:hover .eq-grade-foto {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--ouro), 0 14px 26px rgba(0,0,0,.5);
}
.eq-grade-nome { font-weight: 600; font-size: .93rem; line-height: 1.3; }
.eq-grade-cargo { font-size: .8rem; color: var(--suave); line-height: 1.35; }
.eq-grade-vazio { color: var(--suave); text-align: center; padding: 2rem 0; }

@media (max-width: 640px) {
  .eq-modo { align-self: center; }
  .eq-grade-lista { grid-template-columns: repeat(3, 1fr); gap: 1.1rem .6rem; }
  .eq-grade-foto { width: 78px; height: 78px; }
  .eq-grade-foto .eq-mono { font-size: 1.5rem; }
  .eq-grade-nome { font-size: .82rem; }
  .eq-grade-cargo { font-size: .72rem; }
}
@media (max-width: 360px) {
  .eq-grade-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .eq-topo { flex-direction: column; align-items: stretch; }
  /* As abas não cabem na largura de um telefone. Em vez de empurrarem a
     página para o lado, a própria fileira desliza — e sem barra à vista. */
  .eq-abas {
    display: flex; align-self: stretch; max-width: 100%;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .eq-abas::-webkit-scrollbar { display: none; }
  .eq-aba { flex: 0 0 auto; }
  /* em coluna, a "base" de 240px da busca viraria altura e abriria um vão */
  .eq-busca { max-width: none; min-width: 0; flex: 0 0 auto; }
  .eq-palco { height: 290px; }
  .eq-cartao { width: 172px; height: 230px; }
  .eq-controles { gap: .7rem; }
  .eq-atual { min-width: 0; flex: 1; }
  .eq-atual-nome { font-size: 1.05rem; }
  .eq-falar { width: 100%; }
}

/* quando o botão leva para outro lugar do site, em vez do WhatsApp */
.eq-falar.interno {
  background: var(--ouro); color: #14110E;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
}
.eq-falar.interno:hover { background: #E0B93C; }