/* ==========================================================
   EQUIPO · tarjetas de profes
   Misma estética que las disciplinas: foto en blanco y negro con
   tinte rojo que se revela en color con hover (o al aparecer, en táctil)
   ========================================================== */

/* Tarjeta */
.equipo-card { display: flex; flex-direction: column; }

.equipo-card .foto {
  margin: calc(var(--space-card) * -1) calc(var(--space-card) * -1) 16px;
  width: calc(100% + var(--space-card) * 2);
  aspect-ratio: 4/5;
  flex: none;
}
.equipo-card .foto img { transition: filter .5s var(--ease), transform .5s var(--ease); }
.equipo-card .foto:has(img[src]):after { transition: opacity .5s var(--ease); }

@media (hover: hover) {
  .equipo-card:hover .foto img { filter: none; transform: scale(1.04); }
  .equipo-card:hover .foto:has(img[src]):after { opacity: 0; }
}

/* Táctil: js/equipo.js añade .is-colored al entrar en pantalla */
@media (hover: none) {
  .equipo-card .foto img { transition: filter .6s var(--ease), transform .5s var(--ease); }
  .equipo-card .foto:has(img[src]):after { transition: opacity .6s var(--ease); }
  .equipo-card.is-colored .foto img { filter: none; }
  .equipo-card.is-colored .foto:has(img[src]):after { opacity: 0; }
}

.equipo-name { color: var(--color-cream); }
.equipo-especialidad {
  margin-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-silver);
}
.equipo-frase { margin-top: .7rem; font-size: .92rem; flex: 1; }

/* Distribución
   ≥ 900 px: 3 arriba + 2 centradas abajo (grilla de 6 columnas, cada tarjeta ocupa 2) */
.equipo-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
.equipo-grid > .equipo-card { grid-column: span 2; }
.equipo-grid > .equipo-card:nth-child(4) { grid-column: 2 / span 2; }

/* 500 a 899 px: 2 columnas, la última centrada */
@media (max-width: 899px) {
  .equipo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equipo-grid > .equipo-card:nth-child(4) { grid-column: span 2; }
  .equipo-grid > .equipo-card:last-child { grid-column: 2 / span 2; }
}

/* < 500 px: carrusel horizontal con scroll-snap. Sangra hasta los bordes de la
   pantalla (márgenes negativos = padding de .wrap) y muestra el borde de la siguiente.
   El desborde queda dentro del carrusel: la página no tiene scroll horizontal. */
.equipo-dots { display: none; }

@media (max-width: 499px) {
  .equipo-grid {
    display: flex;
    gap: 14px;
    margin: 0 calc(var(--space-md) * -1);
    padding: 8px var(--space-md) 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-md);
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    position: relative;
    scrollbar-width: none;
  }
  .equipo-grid::-webkit-scrollbar { display: none; }
  .equipo-grid > .equipo-card,
  .equipo-grid > .equipo-card:last-child { flex: 0 0 82%; scroll-snap-align: start; }
  .equipo-grid > .card.reveal { transform: none; } /* sin desplazamiento vertical dentro del carrusel */

  .equipo-dots { display: flex; justify-content: center; margin-top: 10px; }
  .equipo-dots button {
    width: 32px;
    height: 44px; /* objetivo táctil */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .equipo-dots button:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-round);
    background: var(--color-line);
    transition: background .3s, transform .3s;
  }
  .equipo-dots button[aria-current="true"]:before { background: var(--color-accent); transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .equipo-card:hover .foto img { transform: none !important; }
  .equipo-card .foto:after, .equipo-dots button:before { transition: none !important; } /* el * del reset no alcanza a los pseudo-elementos */
}