/* Hero */
#experiencias-topo.mata-media{
  height: min(74vh, 720px);
  min-height: 480px;
}
.page-experiencias #experiencias-topo .mata-overlay{
  max-width: 820px;
  padding: clamp(56px, 8vw, 92px) clamp(32px, 6vw, 96px);
  gap: 26px;
}
.page-experiencias #experiencias-topo .mata-overlay p{ max-width:560px; }
.page-experiencias .exp-hero-title{
  font-size: clamp(2.3rem, 3.8vw, 3.7rem);
  font-weight: 200;
}



/* Galeria em faixa: fotos no formato original, lado a lado, rolando na horizontal */
.page-experiencias #galeria-experiencias{ padding-bottom: 0; }
.page-experiencias .faixa-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.page-experiencias .faixa-head h2{
  margin-top: 18px;
  font-weight: 200;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}
.page-experiencias .faixa-setas{ display:flex; gap:12px; flex-shrink:0; }
.page-experiencias .faixa-seta{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--text-dark);
  background:transparent;
  color:var(--text-dark);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.page-experiencias .faixa-seta svg{ width:18px; height:18px; }
.page-experiencias .faixa-seta:hover{ background:var(--dark); border-color:var(--dark); color:var(--text-light); }
.page-experiencias .faixa-seta:disabled{ opacity:.3; cursor:default; background:transparent; color:var(--text-dark); border-color:var(--text-dark); }

/* a faixa começa alinhada ao texto e vaza até a borda direita da tela */
.page-experiencias .faixa-track{
  --faixa-h: clamp(260px, 30vw, 440px);
  --faixa-inicio: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  list-style:none;
  margin:0;
  display:flex;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left: var(--faixa-inicio);
  padding: 0 var(--gutter) 6px var(--faixa-inicio);
  scrollbar-width:none;
  cursor:grab;
}
.page-experiencias .faixa-track::-webkit-scrollbar{ display:none; }
.page-experiencias .faixa-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.page-experiencias .faixa-track.is-dragging .faixa-foto{ pointer-events:none; }
.page-experiencias .faixa-track:focus-visible{ outline:2px solid var(--dark); outline-offset:4px; }
.page-experiencias .faixa-item{ flex:0 0 auto; scroll-snap-align:start; }
.page-experiencias .faixa-foto{
  display:block;
  height: var(--faixa-h);
  padding:0; border:0;
  background: var(--beige);
  overflow:hidden;
  cursor:zoom-in;
}
.page-experiencias .faixa-foto img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .9s var(--ease-soft);
  -webkit-user-drag:none;
  user-select:none;
}
.page-experiencias .faixa-foto:hover img{ transform: scale(1.04); }
.page-experiencias .faixa-foto:focus-visible{ outline:2px solid var(--dark); outline-offset:3px; }
.page-experiencias .faixa-legenda{
  display:block;
  margin-top:12px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color: var(--text-dark);
}

.page-experiencias .faixa-progresso{
  position:relative;
  height:1px;
  margin-top: clamp(22px, 2.6vw, 34px);
  background: var(--line);
}
.page-experiencias .faixa-progresso span{
  position:absolute; left:0; top:-1px;
  height:3px;
  width:20%;
  background: var(--dark);
  transition: transform .2s linear;
}

@media (max-width: 768px){
  .page-experiencias .faixa-setas{ display:none; }
  .page-experiencias .faixa-track{ --faixa-h: 300px; cursor:auto; }
  .page-experiencias .faixa-foto{ max-width: 78vw; }
}



/* Grid de experiências */
.page-experiencias .exp-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: clamp(24px, 3vw, 40px);
  row-gap: clamp(29px, 3vw, 41px);
}

.page-experiencias .exp-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.page-experiencias .exp-media{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background: var(--beige);
}
.page-experiencias .exp-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 1.2s var(--ease-soft);
}
.page-experiencias .exp-card:hover .exp-media img{ transform: scale(1.08); }

.page-experiencias .exp-grid--single{
  grid-template-columns: minmax(0, 400px);
  justify-content:center;
  margin-top: clamp(29px, 3vw, 41px);
}

.page-experiencias .exp-copy{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.page-experiencias .exp-copy h4{
  font-size: 1.2rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom: 12px;
}
.page-experiencias .exp-copy p{
  font-size:1.05rem;
  margin-bottom: 16px;
}
.page-experiencias .exp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  margin-top:auto;
  text-align:center;
  font-size:0.85rem;
  letter-spacing:0.02em;
  font-weight:400;
  color: var(--text-dark);
  background:transparent;
  border: 1px solid var(--text-dark);
  padding: 13px 22px;
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.page-experiencias .exp-btn:hover{ background: var(--dark); color: var(--text-light); border-color: var(--dark); }



/* Nota de serviço */
.page-experiencias #nota-servico .mata-overlay{
  max-width: none;
  background: rgba(20,22,17,.58);
}
.page-experiencias .nota-overlay{
  align-items:center;
  text-align:center;
  max-width: 680px;
  margin: 0 auto;
}
.page-experiencias .nota-overlay .eyebrow{ font-size:0.95rem; }
.page-experiencias .nota-overlay p{ max-width:640px; font-size:1.05rem; line-height:1.6; }



/* CTA final */
.page-experiencias .final-cta{
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}
.page-experiencias .final-cta-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(19px, 2vw, 26px);
}
.page-experiencias .final-cta-link{
  display:inline-block;
  background: transparent;
  color: var(--text-dark);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 30px;
  border: 1px solid var(--text-dark);
  transition: background-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.page-experiencias .final-cta-link:hover{ background: var(--dark); color: var(--text-light); border-color: var(--dark); }



.page-experiencias .site-footer{
  border-top: 1px solid rgba(244,241,232,.16);
}



@media (max-width: 980px){

  .page-experiencias .exp-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 560px){
  .page-experiencias .exp-grid{
    display:flex;
    grid-template-columns: unset;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    gap:20px;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .page-experiencias .exp-grid::-webkit-scrollbar{ display:none; }
  .page-experiencias .exp-card{
    flex: 0 0 82%;
    scroll-snap-align:start;
  }

  .page-experiencias .final-cta-actions{ flex-direction:column; gap:20px; }
}