/* ==========================================================
   EQUIPO — carrusel, superposicion oscura y resena deslizante
   ========================================================== */

/* ---------- EQUIPO ---------- */
.team{background:var(--navy-deep); color:var(--paper); padding-bottom:132px;}
.team .section-head{border-top-color:var(--rule-light);}
.team .section-head h2{color:var(--paper);}
.team .section-head p{color:rgba(246,243,236,0.68);}

.team-viewport{position:relative;}
.team-track{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:4px;
}
.team-track::-webkit-scrollbar{display:none;}
.member{flex:0 0 calc((100% - 72px) / 4); scroll-snap-align:start;}
@media (max-width:1080px){.member{flex-basis:calc((100% - 48px) / 3);}}
@media (max-width:860px) {.member{flex-basis:calc((100% - 24px) / 2);}}
@media (max-width:600px) {.member{flex-basis:80%;} .team-track{gap:18px;}}

.member-photo{
  position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--navy);
  border-top:2px solid transparent;
  transition:border-color var(--t-hover) ease;
}
.member:hover .member-photo{border-top-color:var(--brass);}
.member-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform var(--t-hover) var(--ease-flip);
}
/* Encuadre propio de un retrato concreto. Debe ir DESPUES de la regla de
   arriba: misma especificidad, decide el orden. */
.member-photo--focus-right img{object-position:66% 16%;}
.member:hover .member-photo img{transform:scale(1.06);}
/* Capa oscura que aparece por opacidad (de-sc-team-member__image__content__overlay) */
.member-overlay{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(0deg, rgba(10,24,48,0.86) 0%, rgba(10,24,48,0.30) 70%, rgba(19,41,75,0.18) 100%);
  opacity:0; transition:opacity var(--t-hover) ease;
}
.member:hover .member-overlay{opacity:1;}

.member-ph{position:absolute; inset:0; display:grid; place-items:center;}
.member-ph::before{content:""; position:absolute; inset:0; background-image:var(--dots-paper); opacity:.10;}
.member-ph svg{width:58px; height:58px; opacity:.30; position:relative;}
.member-ph em{
  position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-style:normal; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,243,236,0.30);
  transition:opacity var(--t-hover) ease;
}
.member:hover .member-ph em, .member:focus-within .member-ph em{opacity:0;}

.member-reveal{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 18px 20px; text-align:center;
}
.member-body{padding:18px 4px 0; text-align:center;}
.member-body h3{font-size:16px; color:var(--paper); line-height:1.35;}
.member-role{
  display:block; margin-top:6px; font-size:11.5px; letter-spacing:0.05em;
  color:var(--accent);
}
/* La reseña y las redes suben desde abajo al pasar el cursor (slide in text) */
.member-about, .member-socials{
  opacity:0; transform:translateY(50%);
  transition:opacity var(--t-hover) ease, transform var(--t-hover) var(--ease-flip);
}
.member-about{
  font-size:12.5px; color:rgba(246,243,236,0.86); margin:0; line-height:1.6;
}
.member-socials{display:flex; gap:10px; justify-content:center; margin-top:14px;}
.member-socials{transition-delay:60ms;}
.member:hover .member-about, .member:hover .member-socials,
.member:focus-within .member-about, .member:focus-within .member-socials{
  opacity:1; transform:translateY(0);
}
.member-socials a{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid rgba(246,243,236,0.38); color:rgba(246,243,236,0.88);
  transition:background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.member-socials a:hover{background:var(--paper); color:var(--navy-deep); border-color:var(--paper);}
.member-socials svg{width:15px; height:15px; fill:currentColor;}
@media (hover:none){
  .member-about, .member-socials{opacity:1; transform:none;}
  .member-overlay{opacity:.55;}
}

.slider-nav{
  display:flex; align-items:center; gap:14px; margin-top:30px;
}
.slider-rail{flex:1; height:1px; background:var(--rule-light); position:relative; overflow:hidden;}
.slider-rail i{
  position:absolute; left:0; top:0; height:100%; background:var(--brass);
  width:var(--rw, 25%); transform:translateX(var(--rx, 0%));
  transition:transform .4s var(--ease-out), width .4s var(--ease-out);
}
.slider-btn{
  width:46px; height:46px; flex:0 0 46px;
  border:1px solid var(--rule-light); background:transparent; color:var(--paper);
  cursor:pointer; display:grid; place-items:center;
  transition:background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, opacity .3s ease;
}
.slider-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5;}
.slider-btn:hover:not(:disabled){background:var(--paper); color:var(--navy-deep); border-color:var(--paper);}
.slider-btn:disabled{opacity:.28; cursor:default;}
.team-note{
  margin-top:26px; font-size:12.5px; color:rgba(246,243,236,0.45); font-style:italic;
}
