/* =========================================================================
   Tarjetas del equipo (src/componentes/equipo.mjs): rejilla y carrusel.
   WordPress: plantillas cmsmasters_entry #127 (post-127.css) y #75 (post-75.css), rejillas de /our-team/ y
   de la portada, carruseles de /about-us/ y de las fichas de servicio. Medido a 1440 px el 26-09-2026.
   ========================================================================= */

/* ---------- Tarjeta ---------- */
.miembro {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.miembro__marco {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radio);
}
.miembro__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 768 / 934;
  object-fit: cover;
  border-radius: var(--radio);
  filter: saturate(0);
  transition: filter var(--transicion), box-shadow var(--transicion);
  -webkit-user-drag: none;
}
.miembro__marco:hover .miembro__foto,
.miembro--enlace:focus-within .miembro__foto {
  filter: saturate(1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

/* Círculo arena con la flecha: aparece al pasar por la foto (WordPress: opacidad 0 → 1 en 0,5 s) */
.miembro__flecha {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--c-arena);
  color: var(--c-fondo);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s;
  pointer-events: none;
}
.miembro__flecha .icono { width: 20px; height: 20px; }
.miembro__marco:hover .miembro__flecha,
.miembro--enlace:focus-within .miembro__flecha { opacity: 1; }

.miembro__nombre {
  margin-top: 20px;
  font-size: var(--t-h5);
  line-height: 1.35;
  letter-spacing: -1px;
  color: var(--c-grafito);
}
.miembro__enlace { transition: color var(--transicion); }
.miembro__enlace:hover,
.miembro__enlace:focus-visible { color: var(--c-arena); }

.miembro__cargo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 10px;
  margin: 0;
  font-family: var(--f-titulos);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--c-apagado);
}

/* Compacta (plantilla #75, fichas de servicio): nombre como h6 y círculo de 55 px */
.miembro--compacta .miembro__nombre {
  font-size: var(--t-h6);
  line-height: 1.65;
  letter-spacing: 0;
}
.miembro--compacta .miembro__flecha { width: 55px; height: 55px; }
.miembro--compacta .miembro__flecha .icono { width: 15px; height: 15px; }

/* ---------- Rejilla ---------- */
.equipo-rejilla {
  --hueco-col: 30px;
  --hueco-fila: 40px;
  display: grid;
  grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr));
  gap: var(--hueco-fila) var(--hueco-col);
}
.equipo-rejilla--4 { --hueco-col: 60px; --hueco-fila: 60px; }   /* portada */
.equipo-rejilla--3 { --hueco-col: 40px; --hueco-fila: 40px; }   /* /equipo/ */

/* ---------- Carrusel (desliza con el dedo, arrastra con el ratón, flechas del teclado) ---------- */
.equipo-carrusel {
  --por-vista: 4;
  --hueco-carrusel: 60px;
  position: relative;
}
.equipo-carrusel--3 { --por-vista: 3; --hueco-carrusel: 30px; }
.equipo-carrusel__pista {
  position: relative;
  display: flex;
  gap: var(--hueco-carrusel);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.equipo-carrusel__pista::-webkit-scrollbar { display: none; }
.equipo-carrusel__pista:focus-visible { outline: 2px solid var(--c-primario); outline-offset: 4px; }
.js .equipo-carrusel__pista { cursor: grab; }
.equipo-carrusel__pista.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.equipo-carrusel__pista.arrastrando a { pointer-events: none; }
/* Bucle infinito: el script pasa una tarjeta de un extremo al otro y compensa el desplazamiento sin animar */
.equipo-carrusel__pista.recolocando { scroll-snap-type: none; scroll-behavior: auto; }
.equipo-carrusel__diapositiva {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--hueco-carrusel)) / var(--por-vista));
  min-width: 0;
  scroll-snap-align: start;
}

/* Botón de pausa del avance automático: invisible hasta que llega el foco del teclado */
.equipo-carrusel__pausa {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 8px 16px;
  border-radius: var(--radio-boton);
  background: var(--c-grafito);
  color: #fff;
  font-size: var(--t-pequeno);
  font-weight: 700;
  line-height: 1.4;
  clip-path: inset(50%);
  white-space: nowrap;
}
.equipo-carrusel__pausa:focus-visible { clip-path: none; }

/* ---------- Tableta ---------- */
@media (max-width: 1180px) {
  .equipo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); --hueco-col: 30px; }
  .equipo-carrusel { --por-vista: 2; --hueco-carrusel: 30px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
  .equipo-rejilla { grid-template-columns: minmax(0, 1fr); }
  .equipo-rejilla--4 { --hueco-fila: 50px; }
  .equipo-rejilla--3 { --hueco-fila: 30px; }
  .equipo-carrusel { --por-vista: 1; --hueco-carrusel: 20px; }
  .equipo-carrusel--3 { --hueco-carrusel: 30px; }
}