/**
 * AMFECCO – Grid del equipo con biografías deslizantes.
 *
 * Estructura del archivo:
 *   1. Tokens de diseño
 *   2. Sección contenedora y cabecera
 *   3. Grid
 *   4. Tarjeta
 *   5. Panel deslizante y contenido escalonado
 *   6. Estados: hover / foco / abierto
 *   7. Modo "caption" (nombre y país siempre visibles en texto)
 *   8. Táctil, movimiento reducido y responsive
 *   9. Utilidades
 *
 * Todo está prefijado con .amfecco- para no chocar con el tema de WordPress.
 */

/* ==========================================================================
   1. Tokens de diseño
   ========================================================================== */

.amfecco-equipo {
  /* Paleta tomada de las tarjetas: azul profundo, cian, verde y naranja. */
  --amfecco-ink: #041d31;
  --amfecco-deep: #082f4d;
  --amfecco-deep-2: #0b3f66;
  --amfecco-cyan: #7ad5ec;
  --amfecco-cyan-strong: #22a6ce;
  --amfecco-cyan-soft: rgba(122, 213, 236, 0.28);
  --amfecco-green: #86c232;
  --amfecco-orange: #f2a13b;
  --amfecco-text: #f2f8fc;
  --amfecco-text-dim: rgba(226, 240, 249, 0.78);

  /* Métricas */
  --amfecco-radius: 20px;
  --amfecco-radius-inner: 14px;
  --amfecco-gap: clamp(16px, 1.6vw, 26px);
  --amfecco-card-min: 232px;
  --amfecco-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --amfecco-speed: 560ms;

  --amfecco-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --amfecco-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   2. Sección contenedora y cabecera
   ========================================================================== */

.amfecco-equipo {
  /* Fondo propio para que el componente se vea igual en cualquier tema. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 4vw, 64px) clamp(18px, 3vw, 48px);
  border-radius: var(--amfecco-radius);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(122, 213, 236, 0.20), transparent 58%),
    radial-gradient(100% 80% at 88% 8%, rgba(242, 161, 59, 0.16), transparent 55%),
    radial-gradient(120% 100% at 50% 108%, rgba(134, 194, 50, 0.22), transparent 62%),
    linear-gradient(168deg, var(--amfecco-deep) 0%, var(--amfecco-ink) 52%, #062a44 100%);
  color: var(--amfecco-text);
  font-family: var(--amfecco-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Trama sutil de puntos, evocando el fondo de las tarjetas. */
.amfecco-equipo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(120% 80% at 50% 20%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 20%, #000 30%, transparent 78%);
  pointer-events: none;
}

.amfecco-equipo__header {
  max-width: 780px;
  margin: 0 auto clamp(26px, 3.4vw, 52px);
  text-align: center;
}

.amfecco-equipo__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  border: 1px solid var(--amfecco-cyan-soft);
  border-radius: 999px;
  background: rgba(122, 213, 236, 0.12);
  color: var(--amfecco-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.amfecco-equipo__title {
  margin: 0 0 14px;
  font-family: var(--amfecco-font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(4, 29, 49, 0.55);
}

.amfecco-equipo__subtitle {
  margin: 0 auto;
  max-width: 62ch;
  color: var(--amfecco-text-dim);
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.65;
}

/* Separador con rombo, igual que el que usan las tarjetas. */
.amfecco-equipo__rule {
  position: relative;
  height: 1px;
  margin: clamp(20px, 2.4vw, 32px) auto 0;
  max-width: 260px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--amfecco-cyan-soft) 18%,
    var(--amfecco-cyan) 50%,
    var(--amfecco-cyan-soft) 82%,
    transparent
  );
}

.amfecco-equipo__rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--amfecco-cyan);
}

/* ==========================================================================
   3. Grid
   ========================================================================== */

.amfecco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--amfecco-card-min), 1fr));
  gap: var(--amfecco-gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Columnas fijas opcionales: [amfecco_grid columnas="4"] */
.amfecco-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amfecco-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.amfecco-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.amfecco-grid[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.amfecco-grid__item {
  margin: 0;
}

/* ==========================================================================
   4. Tarjeta
   ========================================================================== */

.amfecco-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5; /* las tarjetas originales son 800x1000 */
  margin: 0;
  border-radius: var(--amfecco-radius);
  overflow: hidden;
  background: var(--amfecco-deep);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 10px 26px rgba(2, 16, 28, 0.42);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--amfecco-speed) var(--amfecco-ease),
    box-shadow var(--amfecco-speed) var(--amfecco-ease);
}

/* Anillo de cian que se enciende al interactuar. */
.amfecco-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color 340ms var(--amfecco-ease), box-shadow 340ms var(--amfecco-ease);
  pointer-events: none;
}

.amfecco-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

.amfecco-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--amfecco-speed) var(--amfecco-ease);
  will-change: transform;
}

/* Velo para asentar la imagen y dar profundidad. */
.amfecco-card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(4, 29, 49, 0.06) 0%,
    rgba(4, 29, 49, 0) 34%,
    rgba(4, 29, 49, 0.42) 100%
  );
  transition: opacity var(--amfecco-speed) var(--amfecco-ease);
  pointer-events: none;
}

/* Pista de interactividad: "i" en un círculo, arriba a la derecha. */
.amfecco-card__hint {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(4, 29, 49, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--amfecco-font-display);
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  transition: opacity 300ms var(--amfecco-ease), transform 300ms var(--amfecco-ease);
  pointer-events: none;
}

.amfecco-card__hint svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   5. Panel deslizante y contenido escalonado
   ========================================================================== */

.amfecco-card__panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.4vw, 20px);
  border-radius: inherit;
  overflow: hidden;
  /* Bastante opaco arriba, donde van el chip y el nombre, y más translúcido
     en el centro para que el retrato se intuya detrás del desenfoque. */
  background:
    linear-gradient(
      180deg,
      rgba(6, 40, 66, 0.90) 0%,
      rgba(6, 40, 66, 0.78) 26%,
      rgba(4, 29, 49, 0.84) 60%,
      rgba(3, 22, 38, 0.95) 100%
    );
  backdrop-filter: blur(9px) saturate(118%);
  -webkit-backdrop-filter: blur(9px) saturate(118%);

  /* Estado cerrado: el panel vive justo debajo del borde inferior. */
  transform: translateY(100%);
  transition: transform var(--amfecco-speed) var(--amfecco-ease);
  will-change: transform;
}

/* Filo de cian en la parte superior del panel, que se dibuja al abrir. */
.amfecco-card__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--amfecco-cyan) 22%,
    var(--amfecco-cyan) 78%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 480ms var(--amfecco-ease) 120ms;
}

/* Contenido escalonado: cada hijo entra un poco después que el anterior. */
.amfecco-card__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0; /* permite que el hijo con scroll se encoja */
  height: 100%;
}

.amfecco-card__content > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 380ms var(--amfecco-ease),
    transform 480ms var(--amfecco-ease);
}

/* Los rótulos no se comprimen nunca. Si el panel va justo de alto (tarjetas
   pequeñas en móvil), el espacio disponible se lo queda la biografía y no se
   corta a mitad de línea el nombre ni la especialidad. */
.amfecco-card__country,
.amfecco-card__name,
.amfecco-card__tagline,
.amfecco-card__divider {
  flex: 0 0 auto;
}

/* Escalonado del contenido al abrirse: país, nombre, especialidad, línea y
   biografía. Se declara una sola vez y vale igual para hover, para foco y para
   .is-open, en lugar de repetirlo en cada estado. */
.amfecco-card__country { transition-delay: 90ms; }
.amfecco-card__name { transition-delay: 145ms; }
.amfecco-card__tagline { transition-delay: 195ms; }
.amfecco-card__divider { transition-delay: 235ms; }
.amfecco-card__bio-wrap { transition-delay: 275ms; }

.amfecco-card__country {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--amfecco-cyan-soft);
  border-radius: 999px;
  background: rgba(122, 213, 236, 0.14);
  color: var(--amfecco-cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.amfecco-card__country::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amfecco-cyan);
  box-shadow: 0 0 0 3px rgba(122, 213, 236, 0.2);
  flex: 0 0 auto;
}

.amfecco-card__name {
  margin: 0;
  font-family: var(--amfecco-font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  text-wrap: balance;
}

.amfecco-card__tagline {
  margin: 0;
  color: var(--amfecco-cyan);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}

.amfecco-card__divider {
  height: 1px;
  margin: 2px 0 0;
  background: linear-gradient(
    90deg,
    var(--amfecco-cyan-soft),
    rgba(122, 213, 236, 0.06)
  );
  flex: 0 0 auto;
}

/* El cuerpo de la biografía ocupa el resto y hace scroll si el texto es largo.
   El envoltorio existe para poder superponer un degradado que avise de que
   queda más texto, sin que ese degradado se desplace con el contenido. */
.amfecco-card__bio-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.amfecco-card__bio-wrap::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 0;
  height: 30px;
  background: linear-gradient(
    180deg,
    rgba(3, 22, 38, 0) 0%,
    rgba(3, 22, 38, 0.88) 90%
  );
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

/* El JS añade .is-scrollable solo cuando de verdad queda texto por leer. */
.amfecco-card__bio-wrap.is-scrollable::after {
  opacity: 1;
}

.amfecco-card__bio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  padding-bottom: 20px;
  margin-right: -4px;
  color: var(--amfecco-text-dim);
  font-size: 0.82rem;
  line-height: 1.58;
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 213, 236, 0.5) transparent;
}

.amfecco-card__bio p {
  margin: 0 0 0.7em;
}

.amfecco-card__bio p:last-child {
  margin-bottom: 0;
}

/* Lista para perfiles con trayectoria enumerada (p. ej. Dra. Alma Rosa Mata). */
.amfecco-card__bio ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.amfecco-card__bio li {
  position: relative;
  margin: 0 0 0.55em;
  padding-left: 15px;
}

.amfecco-card__bio li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--amfecco-cyan);
  opacity: 0.75;
}

.amfecco-card__bio::-webkit-scrollbar {
  width: 5px;
}

.amfecco-card__bio::-webkit-scrollbar-track {
  background: transparent;
}

.amfecco-card__bio::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(122, 213, 236, 0.45);
}

/* Botón de cierre, útil en táctil. */
.amfecco-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms var(--amfecco-ease), background 200ms ease;
}

.amfecco-card__close:hover,
.amfecco-card__close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  outline: 2px solid var(--amfecco-cyan);
  outline-offset: 2px;
}

/* ==========================================================================
   6. Estados: hover / foco / abierto
   ========================================================================== */

/* El "stage" de animación se comparte entre hover, foco y el estado .is-open
   que activa el JS en pantallas táctiles. */
@media (hover: hover) {
  .amfecco-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 20px 44px rgba(2, 16, 28, 0.55);
  }

  .amfecco-card:hover .amfecco-card__img,
  .amfecco-card:focus-visible .amfecco-card__img {
    transform: scale(1.06);
  }

  .amfecco-card:hover .amfecco-card__veil,
  .amfecco-card:focus-visible .amfecco-card__veil {
    opacity: 0.35;
  }

  .amfecco-card:hover .amfecco-card__hint,
  .amfecco-card:focus-visible .amfecco-card__hint {
    opacity: 0;
    transform: scale(0.7);
  }

  .amfecco-card:hover::after,
  .amfecco-card:focus-visible::after {
    border-color: var(--amfecco-cyan);
    box-shadow: 0 0 0 4px rgba(122, 213, 236, 0.18);
  }

  .amfecco-card:hover .amfecco-card__panel,
  .amfecco-card:focus-visible .amfecco-card__panel {
    transform: translateY(0);
  }

  .amfecco-card:hover .amfecco-card__panel::before,
  .amfecco-card:focus-visible .amfecco-card__panel::before {
    transform: scaleX(1);
  }

  .amfecco-card:hover .amfecco-card__content > *,
  .amfecco-card:focus-visible .amfecco-card__content > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estado abierto: lo usa el JS en táctil y con teclado, y también sirve para
   forzar el panel abierto en pruebas visuales. */
.amfecco-card.is-open .amfecco-card__img {
  transform: scale(1.06);
}

.amfecco-card.is-open .amfecco-card__veil {
  opacity: 0.35;
}

.amfecco-card.is-open .amfecco-card__hint {
  opacity: 0;
  transform: scale(0.7);
}

.amfecco-card.is-open::after {
  border-color: var(--amfecco-cyan);
  box-shadow: 0 0 0 4px rgba(122, 213, 236, 0.18);
}

.amfecco-card.is-open .amfecco-card__panel {
  transform: translateY(0);
}

.amfecco-card.is-open .amfecco-card__panel::before {
  transform: scaleX(1);
}

.amfecco-card.is-open .amfecco-card__content > * {
  opacity: 1;
  transform: translateY(0);
}

.amfecco-card.is-open .amfecco-card__close {
  opacity: 1;
}

/* En táctil el botón de cierre se muestra siempre que el panel esté abierto. */
@media (hover: none) {
  .amfecco-card .amfecco-card__close {
    opacity: 1;
  }
}

/* ==========================================================================
   7. Modo del panel: solo biografía (por defecto) o panel completo
   Con data-panel="bio" el panel muestra únicamente la biografía: el país, el
   nombre y la especialidad ya están impresos en la tarjeta, así que aquí
   sobran. Con data-panel="full" se muestra todo.
   ========================================================================== */

.amfecco-grid[data-panel="bio"] .amfecco-card__country,
.amfecco-grid[data-panel="bio"] .amfecco-card__name,
.amfecco-grid[data-panel="bio"] .amfecco-card__tagline,
.amfecco-grid[data-panel="bio"] .amfecco-card__divider {
  display: none;
}

/* Sin rótulos por delante, la biografía entra antes. */
.amfecco-grid[data-panel="bio"] .amfecco-card__bio-wrap {
  transition-delay: 150ms;
}

/* Reserva el hueco del botón de cierre: si no, la primera línea de texto se
   metería debajo de la ✕. */
.amfecco-grid[data-panel="bio"] .amfecco-card__bio {
  padding-right: 26px;
}

/* Con 3 columnas la tarjeta es ancha y la biografía aguanta algo más de
   cuerpo. En móvil se mantiene el tamaño compacto. */
@media (min-width: 861px) {
  .amfecco-grid[data-panel="bio"] .amfecco-card__bio {
    font-size: 0.88rem;
    line-height: 1.62;
  }
}

/* ==========================================================================
   8. Modo "caption": nombre y país siempre visibles en texto
   Actívalo con [amfecco_grid caption="on"]. Útil si algún día reemplazas las
   tarjetas por fotografías sin el nombre impreso.
   ========================================================================== */

.amfecco-grid[data-caption="on"] .amfecco-card__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 34px 14px 13px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(4, 29, 49, 0.72) 42%,
    rgba(3, 22, 38, 0.92)
  );
  transition: opacity 300ms var(--amfecco-ease);
  pointer-events: none;
}

.amfecco-grid[data-caption="on"] .amfecco-card__caption-name {
  display: block;
  font-family: var(--amfecco-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.amfecco-grid[data-caption="on"] .amfecco-card__caption-country {
  display: block;
  margin-top: 3px;
  color: var(--amfecco-cyan);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.amfecco-grid[data-caption="on"] .amfecco-card:hover .amfecco-card__caption,
.amfecco-grid[data-caption="on"] .amfecco-card:focus-visible .amfecco-card__caption,
.amfecco-grid[data-caption="on"] .amfecco-card.is-open .amfecco-card__caption {
  opacity: 0;
}

/* Sin el modo caption, la capa no existe visualmente. */
.amfecco-grid:not([data-caption="on"]) .amfecco-card__caption {
  display: none;
}

/* ==========================================================================
   9. Táctil, movimiento reducido y responsive
   ========================================================================== */

/* En pantallas táctiles el panel se abre con un toque y no debe heredar el
   desplazamiento de hover del escritorio. */
@media (hover: none) {
  .amfecco-card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amfecco-equipo {
    --amfecco-speed: 1ms;
  }

  .amfecco-card,
  .amfecco-card__img,
  .amfecco-card__panel,
  .amfecco-card__panel::before,
  .amfecco-card__content > *,
  .amfecco-card__hint,
  .amfecco-card__close,
  .amfecco-card__caption,
  .amfecco-card__veil {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .amfecco-card:hover {
    transform: none;
  }

  .amfecco-card:hover .amfecco-card__img,
  .amfecco-card.is-open .amfecco-card__img {
    transform: none;
  }

  /* Con movimiento reducido el contenido aparece de golpe, sin deslizarse. */
  .amfecco-card__content > * {
    transform: none;
  }
}

/* La rejilla de 3 columnas pasa a 2 antes de que la tarjeta se estreche de más. */
@media (max-width: 760px) {
  .amfecco-grid[data-columns="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Móvil: 2 columnas compactas; en pantallas muy angostas, 1. */
@media (max-width: 860px) {
  .amfecco-equipo {
    --amfecco-card-min: 168px;
    --amfecco-gap: 14px;
    padding: 26px 16px 34px;
    border-radius: 16px;
  }

  .amfecco-card {
    --amfecco-radius: 15px;
  }

  .amfecco-card__bio {
    font-size: 0.78rem;
    line-height: 1.52;
  }

  .amfecco-card__name {
    font-size: 0.98rem;
  }

  .amfecco-card__hint {
    width: 28px;
    height: 28px;
    top: 9px;
    right: 9px;
    font-size: 0.85rem;
  }
}

@media (max-width: 560px) {
  .amfecco-equipo {
    --amfecco-card-min: 142px;
    --amfecco-gap: 12px;
  }

  /* Los grids de columnas fijas se relajan en pantallas chicas. */
  .amfecco-grid[data-columns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* En dos columnas la tarjeta es pequeña, así que el panel se compacta para
     que el espacio se lo quede la biografía y no los rótulos. */
  .amfecco-card__panel {
    padding: 12px 11px;
    gap: 0;
  }

  .amfecco-card__content {
    gap: 7px;
  }

  .amfecco-card__country {
    padding: 4px 10px 4px 8px;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
  }

  .amfecco-card__country::before {
    width: 6px;
    height: 6px;
  }

  .amfecco-card__name {
    font-size: 0.94rem;
    line-height: 1.14;
  }

  /* La especialidad se limita a dos líneas: el resto es la biografía. */
  .amfecco-card__tagline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.7rem;
    line-height: 1.32;
  }

  .amfecco-card__divider {
    margin-top: 0;
  }

  .amfecco-card__bio {
    padding-bottom: 16px;
    font-size: 0.74rem;
    line-height: 1.46;
  }

  .amfecco-card__close {
    top: 8px;
    right: 8px;
    width: 25px;
    height: 25px;
    font-size: 0.9rem;
  }

  .amfecco-card__hint {
    width: 26px;
    height: 26px;
    top: 8px;
    right: 8px;
  }
}

@media (max-width: 380px) {
  .amfecco-grid,
  .amfecco-grid[data-columns] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   10. Utilidades
   ========================================================================== */

.amfecco-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}