/* ==========================================================================
   components/paises.css — Países
   Componente marcado: pais (index, nosotros).
   ========================================================================== */
.paises { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.paises__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--borde-inverso-sutil);
  border-radius: var(--radio-pill);
  background: var(--superficie-inversa);
  color: var(--c-blanco);
  font-weight: 500;
}
/* Bandera SVG (assets/img/banderas/, 3:2): igual en todos los sistemas, a diferencia
   de los emojis, que Windows muestra como letras. El filete la separa del fondo oscuro. */
.paises__bandera {
  flex: none;
  width: var(--ancho-bandera);
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radio-xs);
  box-shadow: 0 0 0 var(--hairline) var(--borde-inverso);
}