/* Cristco V14 · equipo estable, sin expansión y con imágenes completas. */

/*
 * Objetivo:
 * - Las tarjetas no cambian de ancho ni alto al hacer hover.
 * - Cada integrante conserva un espacio visual propio.
 * - Imagen A e imagen B ocupan exactamente el mismo marco.
 * - Nunca se recorta la foto: se usa object-fit: contain.
 * - La descripción queda fuera de la imagen para no taparla.
 */
.team-deck{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,340px))!important;
  justify-content:center!important;
  align-items:start!important;
  gap:clamp(24px,3vw,38px)!important;
  min-height:0!important;
  margin-top:30px!important;
}

.team-person,
.team-person:hover,
.team-person:focus-visible,
.team-person:focus-within,
.team-person.is-active{
  position:relative!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  flex:none!important;
  width:100%!important;
  max-width:340px!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
  transform:none!important;
  filter:none!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#0d1421,#090f19)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:border-color .26s ease,box-shadow .26s ease!important;
}

.team-person:hover,
.team-person:focus-visible,
.team-person:focus-within,
.team-person.is-active{
  border-color:rgba(100,244,255,.36)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
}

.team-person::before{display:none!important}
.team-person-overlay{display:none!important}

.team-person-media{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 18% 12%,rgba(100,244,255,.07),transparent 34%),
    radial-gradient(circle at 80% 82%,rgba(146,119,255,.07),transparent 32%),
    #070c14!important;
}

.team-person-media .team-person-image,
.team-person-media img,
.team-person:hover .team-person-media img,
.team-person:focus-visible .team-person-media img,
.team-person:focus-within .team-person-media img,
.team-person.is-active .team-person-media img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  filter:saturate(.96) contrast(1.01) brightness(.9)!important;
  transition:opacity .42s cubic-bezier(.2,.7,.2,1),filter .35s ease!important;
}

.team-person-media.has-hover-media .team-person-image-base{opacity:1!important;z-index:1}
.team-person-media.has-hover-media .team-person-image-hover{opacity:0!important;z-index:2}

.team-person:hover .team-person-media.has-hover-media .team-person-image-base,
.team-person:focus-visible .team-person-media.has-hover-media .team-person-image-base,
.team-person:focus-within .team-person-media.has-hover-media .team-person-image-base,
.team-person.is-active .team-person-media.has-hover-media .team-person-image-base{opacity:0!important}

.team-person:hover .team-person-media.has-hover-media .team-person-image-hover,
.team-person:focus-visible .team-person-media.has-hover-media .team-person-image-hover,
.team-person:focus-within .team-person-media.has-hover-media .team-person-image-hover,
.team-person.is-active .team-person-media.has-hover-media .team-person-image-hover{opacity:1!important;filter:saturate(1) contrast(1.02) brightness(1)!important}

.team-person-scan{display:none!important}
.team-person-number{top:14px!important;left:15px!important}
.team-person-badge{top:12px!important;right:12px!important}

.team-person-copy,
.team-person:hover .team-person-copy,
.team-person:focus-visible .team-person-copy,
.team-person:focus-within .team-person-copy,
.team-person.is-active .team-person-copy{
  position:relative!important;
  inset:auto!important;
  z-index:4!important;
  display:block!important;
  min-height:150px!important;
  padding:20px 21px 21px!important;
  transform:none!important;
  background:linear-gradient(180deg,rgba(14,21,34,.98),rgba(8,13,22,.99))!important;
}

.team-person h3{font-size:clamp(1.45rem,2vw,2rem)!important;line-height:1!important}
.team-person-copy p,
.team-person:hover .team-person-copy p,
.team-person:focus-visible .team-person-copy p,
.team-person:focus-within .team-person-copy p,
.team-person.is-active .team-person-copy p{
  display:block!important;
  max-width:none!important;
  margin:12px 0 0!important;
  color:#c8d2df!important;
  font-size:.74rem!important;
  line-height:1.55!important;
  opacity:1!important;
  transform:none!important;
}

.team-person-hint{margin-top:13px!important;opacity:.72!important}
.team-code-line{max-width:1100px;margin:20px auto 0!important}

/* En escritorio la tarjeta nunca se activa sola: sólo hover/foco cambia A -> B. */
@media(pointer:fine){
  .team-person.is-active:not(:hover):not(:focus-visible):not(:focus-within) .team-person-media.has-hover-media .team-person-image-base{opacity:1!important}
  .team-person.is-active:not(:hover):not(:focus-visible):not(:focus-within) .team-person-media.has-hover-media .team-person-image-hover{opacity:0!important}
}

@media(max-width:900px){
  .team-deck{grid-template-columns:repeat(auto-fit,minmax(250px,320px))!important;gap:24px!important}
  .team-person{max-width:320px!important}
}

@media(max-width:620px){
  .team-deck{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;margin-top:24px!important}
  .team-person{width:min(100%,360px)!important;max-width:360px!important;margin-inline:auto!important}
  .team-person-media{aspect-ratio:1/1!important}
  .team-person-copy{min-height:0!important;padding:18px!important}
}

@media(prefers-reduced-motion:reduce){
  .team-person,
  .team-person-media .team-person-image{transition:none!important}
}