/* ============================================================
   CEF · EQUIPO — grid de círculos flotantes (page-scoped)
   ------------------------------------------------------------
   Reestiliza el pro-card COMPARTIDO a CÍRCULO, SOLO bajo `.team-grid--circles`
   (equipo.njk). El home y el roster de telemedicina usan `.team-grid` a secas →
   quedan INTACTOS (con su layout y sus botones de agendar).
   La aparición al scrollear la da `data-cine-reveal` + cinematic.js/.css (una vez,
   respeta prefers-reduced-motion). Sin JS, el <noscript> de equipo.njk los muestra.
   iOS-safe: solo transform/opacity + box-shadow (el drop-shadow del cutout es SOLO
   en el modal, 1 por vez). Disco branded en 2 intensidades vía --disc-1/--disc-2.
   ============================================================ */

/* Especificidad 0,2,0 → gana sobre `.team-grid` de refinamiento.css (carga después).
   Mobile-first: 2 por fila; desde 640px, columnas fluidas (~5 en desktop). */
.team-grid.team-grid--circles {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px clamp(10px, 4vw, 22px);
  align-items: start;
  border-top: 0;
}
@media (min-width: 640px) {
  .team-grid.team-grid--circles {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 40px clamp(16px, 2vw, 26px);
  }
}

/* La tarjeta horizontal del pro-card se verticaliza y pierde la caja: queda
   círculo + nombre + rol + "Ver más", centrado. */
.team-grid--circles .pro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}
.team-grid--circles .pro-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* ---- El círculo (disco branded suave + anillo + sombra para "flotar") ---- */
.team-grid--circles .pro-card__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 40px;               /* iniciales más grandes en el círculo */
  /* Disco branded (intensidad B) detrás del cutout (las fotos son PNG con alfa) +
     anillo teal. Las iniciales traen su propio gradiente inline (monograma) que gana
     sobre este disco → quedan vibrantes. */
  background: radial-gradient(circle at 50% 30%, var(--disc-1, #d9e9e4), var(--disc-2, #b6d4cd));
  box-shadow:
    0 18px 30px -14px rgba(16, 52, 62, .42),
    inset 0 0 0 1.5px rgba(10, 111, 106, .32);
}
@media (min-width: 640px) {
  .team-grid--circles .pro-card__avatar { width: 150px; height: 150px; font-size: 46px; }
}
@media (min-width: 1000px) {
  .team-grid--circles .pro-card__avatar { width: 158px; height: 158px; font-size: 50px; }
}
/* Foto dentro del círculo: cover + encuadre por-foto (--pp) sin deformar la cara. */
.team-grid--circles .pro-card__avatar--photo {
  object-fit: cover;
  object-position: var(--pp, center 20%);
}

/* ---- Nombre + rol centrados ---- */
.team-grid--circles .pro-card__id { text-align: center; }
.team-grid--circles .pro-card__name { font-size: 17px; }
.team-grid--circles .pro-card__role { margin-top: 3px; }

/* Registro SIS: en el círculo NO (se muestra dentro del modal). */
.team-grid--circles .pro-card__reg { display: none; }

/* ---- "Ver más": el <summary> como link teal centrado, sin triángulo ---- */
.team-grid--circles .pro-card__more { font-size: 13px; margin: 0; }
.team-grid--circles .pro-card__more > summary {
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: .02em;
  list-style: none;
  cursor: pointer;
}
.team-grid--circles .pro-card__more > summary::-webkit-details-marker { display: none; }
.team-grid--circles .pro-card__more > summary::before { content: none; } /* quita el '＋' del acordeón base */
.team-grid--circles .pro-card__more > summary::after { content: " →"; }
/* Sin JS el <details> expande la ficha inline (fallback): que se lea centrada. */
.team-grid--circles .pro-card__more[open] { text-align: left; margin-top: 8px; }

/* ---- Stagger del reveal: escalonado por columna (ripple sutil, serio) ---- */
.team-grid--circles .pro-card:nth-child(4n+2) { transition-delay: .06s; }
.team-grid--circles .pro-card:nth-child(4n+3) { transition-delay: .12s; }
.team-grid--circles .pro-card:nth-child(4n+4) { transition-delay: .18s; }